Not able to use p5.js-svg in Webpack

[Eli Pleaner]

I'm following the example shown in the repo here, which seems simple enough. I was already using p5 as a webpack module, so thought it would be straight-forward to drop in the p5.js-svg module as well.

I'm getting this, though:

ERROR in ./node_modules/p5.js-svg/src/p5.RendererSVG.js 1:0-56 Module not found: Error: Can't resolve 'svgcanvas' in '.node_modules/p5.js-svg/src' resolve 'svgcanvas' in '.node_modules/p5.js-svg/src'

[Zeno Zeng]

@epleaner Hi, I can not reproduce this issue, can you try the examples/webpack here: https://github.com/zenozeng/p5.js-svg/tree/main/examples/webpack

npm install
npm run build

[Eli Pleaner]

webpack git:(main) ls
index.html        package-lock.json package.json      src
➜  webpack git:(main) npm install

added 124 packages, and audited 125 packages in 783ms

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  webpack git:(main) npm run build

> p5.js-svg-webpack-example@1.0.0 build
> webpack

assets by status 804 KiB [cached] 1 asset
orphan modules 31.1 KiB [orphan] 10 modules
runtime modules 884 bytes 4 modules
cacheable modules 827 KiB
  ./src/index.js + 10 modules 31.3 KiB [built] [code generated]
  ./node_modules/p5/lib/p5.min.js 796 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./node_modules/p5.js-svg/src/p5.RendererSVG.js 1:0-54
Module not found: Error: Can't resolve 'svgcanvas' in '/Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/p5.js-svg/src'
resolve 'svgcanvas' in '/Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/p5.js-svg/src'
  Parsed request is a module
  using description file: /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/p5.js-svg/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/p5.js-svg/src/node_modules doesn't exist or is not a directory
      /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/p5.js-svg/node_modules doesn't exist or is not a directory
      /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules
        single file module
          using description file: /Users/elipleaner/workspace/p5.js-svg/examples/webpack/package.json (relative path: ./node_modules/svgcanvas)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/svgcanvas doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/svgcanvas.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/svgcanvas.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/svgcanvas.wasm doesn't exist
        /Users/elipleaner/workspace/p5.js-svg/examples/webpack/node_modules/svgcanvas doesn't exist
      /Users/elipleaner/workspace/p5.js-svg/examples/node_modules doesn't exist or is not a directory
      /Users/elipleaner/workspace/p5.js-svg/node_modules doesn't exist or is not a directory
      /Users/elipleaner/workspace/node_modules doesn't exist or is not a directory
      looking for modules in /Users/elipleaner/node_modules
        single file module
          No description file found in /Users/elipleaner/node_modules or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /Users/elipleaner/node_modules/svgcanvas doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /Users/elipleaner/node_modules/svgcanvas.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /Users/elipleaner/node_modules/svgcanvas.json doesn't exist
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            /Users/elipleaner/node_modules/svgcanvas.wasm doesn't exist
        /Users/elipleaner/node_modules/svgcanvas doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./node_modules/p5.js-svg/src/index.js 1:0-43 13:4-15
 @ ./src/index.js 2:0-29 4:0-5

webpack 5.56.1 compiled with 1 error and 1 warning in 5918 ms
➜  webpack git:(main)

[Zeno Zeng]

@epleaner Hi, this should be fixed in p5.js-svg@1.3.2, I also updated the example. You can try it when you have time. Feel free to reopen this issue if the problem still exists.