P5.js: Using dom library in typescript

[wanbinkimoon]

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [x] Other (specify if possible) addons: p5.dom

Which platform were you using when you encountered this?

• [x] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: 5.0.7
• Web browser and version: testing on chrome 72.0.3626.121
• Operating System: Mac OS 10.13
• Steps to reproduce this: using a basic react + webpack + typescript boilerplate try to add p5.dom addon

importing like this is fine in standard js

import * as p5 from 'p5';
import 'p5/lib/addons/p5.dom';

but in typescript it seems to return an error

p5.dom.js?6a73:3225 Uncaught ReferenceError: p5 is not defined
    at eval (p5.dom.js?6a73:3225)
    at Object.../node_modules/p5/lib/addons/p5.dom.js (vendors~app.bundle.js:827)
    at __webpack_require__ (bundle.js:783)
    at fn (bundle.js:151)
    at eval (p5Sketch.js?e190:1)
    at Module../app/components/VideoShader/p5Sketch.js (app.bundle.js:58)
    at __webpack_require__ (bundle.js:783)
    at fn (bundle.js:151)
    at Module.eval (index.tsx:4)
    at eval (index.tsx:113)

the p5.dom module declaration seems to import the right reference on line 3

import * as p5 from '../../index';

and the index.d.ts is importing the reference on line 9

/// <reference path="./lib/addons/p5.dom.d.ts" />

[wanbinkimoon]

UPDATE: SOLVED

I found the same issue reported in the p5-types repo
https://github.com/p5-types/p5.ts/issues/2

@Zalastax clear my doubts with an example project you can find here: link

In particular at this line

import 'script-loader!p5/lib/addons/p5.dom.min.js'

@Zalastax is using a custom webpack loader that made my day: https://www.npmjs.com/package/script-loader

The required synthax is clear as you can see: just add a script-loader! prefix before the import path