P5.js: "ReferenceError: p5 is not defined" when importing p5.dom in a typescript environment

[Nazeh]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [x] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 0.7.3
• Web browser and version: 1.7.92 Chromium: 80.0.3987.163 (Official Build) (64-bit)
• Operating System: Win 10, WSL2
• Steps to reproduce this:
  In a typescript project, after installing P5.js and @types/p5, import p5 and p5.dom :

//index.ts
import * as p5 from "p5";
import "p5/lib/addons/p5.dom";

-How to solve the problem manually:
In node_modules/p5/lib/addons/p5.dom.js :
Cut lines 3325 to 3247 and paste at line 3324

Before:

// node_modules/p5/lib/addons/p5.dom.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd)
    define('p5.dom', ['p5'], function(p5) {
      factory(p5);
    });
  else if (typeof exports === 'object') factory(require('../p5'));
  else factory(root['p5']);
})(this, function(p5) {
....
});

p5.File._createLoader = function(theFile, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var p5file = new p5.File(theFile);
    p5file.data = e.target.result;
    callback(p5file);
  };
  return reader;
};

p5.File._load = function(f, callback) {
  // Text or data?
  // This should likely be improved
  if (/^text\//.test(f.type)) {
    p5.File._createLoader(f, callback).readAsText(f);
  } else if (!/^(video|audio)\//.test(f.type)) {
    p5.File._createLoader(f, callback).readAsDataURL(f);
  } else {
    var file = new p5.File(f);
    file.data = URL.createObjectURL(f);
    callback(file);
  }
};

After:

// node_modules/p5/lib/addons/p5.dom.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd)
    define('p5.dom', ['p5'], function(p5) {
      factory(p5);
    });
  else if (typeof exports === 'object') factory(require('../p5'));
  else factory(root['p5']);
})(this, function(p5) {
....

  p5.File._createLoader = function(theFile, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var p5file = new p5.File(theFile);
      p5file.data = e.target.result;
      callback(p5file);
    };
    return reader;
  };

  p5.File._load = function(f, callback) {
    // Text or data?
    // This should likely be improved
    if (/^text\//.test(f.type)) {
      p5.File._createLoader(f, callback).readAsText(f);
    } else if (!/^(video|audio)\//.test(f.type)) {
      p5.File._createLoader(f, callback).readAsDataURL(f);
    } else {
      var file = new p5.File(f);
      file.data = URL.createObjectURL(f);
      callback(file);
    }
  };
});

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Nazeh]

I realized that I was using an older version of p5.js :/ sorry folks for the false alarm!

[vanyamil]

Actually, I have this exact problem. My file starts with the lines:
import p5 from "p5";
import 'p5/lib/addons/p5.sound';

I use Laravel Mix for minifying + compiling ES6 down to vanilla JS.

Since I've moved from 0.7.2 to 1.0.0 (NPM version), the compiled script that uses those lines gives me a "ReferenceError: p5 is not defined" for line 3112 of p5.sound - "p5.prototype.isSupported = ...". Any hints?

[SIRHAMY]

Running into the same issue as @vanyamil with Typescript and Webpack

import p5 from "p5"
import "p5/lib/addons/p5.sound"

[vennsoh]

Same, webpack + p5 seems tricky.