TypeScript: p5/lib/addons/p5.dom not found on request

p5.js
1

Hi,
I rewrote a JS code to TypeScript but I got p5/lib/addons/p5.dom not found on request. This is the code:

src/sketch.ts

// https://vimeo.com/channels/learningp5js/142698162

import 'p5';
require('p5/lib/addons/p5.dom')

let sketch = (p: p5) => {
  let canvas;
  let h1;
  let x = 100;
  let y = 100;

  p.setup = function () {
    canvas = this.createCanvas(200, 200);
    canvas.position(400, 500);
    h1 = this.createElement('h1', 'Waiting.');
    // h1.position(400, 400);
    // createP("My favorite color is purple")

  }

  p.mousePressed = function () {
    h1.html("Now I will show you my favorite number");
    this.createP("My favorite number is " + this.random(0, 10));
  }


  p.draw = function () {
    this.background(150, 100);
    this.fill(255, 0, 0);
    this.rect(x, y, 50, 50);
    h1.position(x, y);
    x = x + this.random(-5, 5);
  }.bind(p);
}

var sketchP = new p5(sketch);

src/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>7.2_p5.js_Creating_HTML_elements_with_JavaScript</title>
  </head>
  <body>
    <h1>
      I am making a video!
    </h1>
    
    <p>
      This is my essay about how I love to make videos. 
    </p>
  </body>
</html>

fuse.js:

const {FuseBox, WebIndexPlugin} = require('fuse-box');

const fuse = FuseBox.init({
  homeDir: 'src',
  output: 'dist/$name.js',
  sourceMaps: true,
  globals: { "p5": "p5" },
  plugins: [
      WebIndexPlugin(),
  ]
});

fuse.dev({open : true});

fuse.bundle('app')
  .instructions('> sketch.ts +p5')
  .hmr({reload: true})
  .watch()

fuse.run();

package.json

{
	"dependencies": {
		"p5": "^0.6.1"
	},
	"devDependencies": {
		"@types/node": "^10.3.1",
		"fuse-box": "^3.2.2",
		"tslib": "^1.9.2",
		"typescript": "^2.9.1",
		"uglify-es": "^3.3.9",
		"uglify-js": "^3.4.0"
	}
}

How is it possible to fix it?

Thank you in advance.

Michal

2

I dont know I recommend you repost to get more views