zenozeng/p5.js-svg

Can't get P5.js-svg work within npm: Cannot read properties of undefined (reading 'Renderer2D')

Closed this issue · 1 comments

I'm working with P5JS on a simple website, but can't get P5.js-svg to work within it.
I installed it via npm and then imported it after p5 on my sketch:
(Via Instance Mode)

import p5 from "p5"
import "p5.js-svg"

let graphic = require("./../assets/vector.svg")

const sketch = (s) => {

    let gr

    s.preload = () => {
        gr = s.loadImage(graphic)
    }

    s.setup = () => {
        s.createCanvas(s.windowWidth, s.windowHeight, SVG);
    }

    s.draw = () => {
        s.background(0);
        s.image(gr, 50, 50)
    }
}

const sketchInstance = new p5(sketch, document.body)

It throws this error:

main.js:516 Uncaught TypeError: Cannot read properties of undefined (reading 'Renderer2D')
    at __WEBPACK_DEFAULT_EXPORT__ (p5.RendererSVG.js:47)
    at eval (index.js:19)
    at eval (index.js:29)
    at Module../node_modules/p5.js-svg/src/index.js (main.js:151)
    at __webpack_require__ (main.js:513)
    at fn (main.js:733)
    at eval (404.js:4)
    at Module../src/modules/404.js (main.js:473)
    at __webpack_require__ (main.js:513)
    at fn (main.js:733)

Thanks!

@OlivierEstevez Hi, I just released p5.js-svg 1.1.2 to fix this. You can try the webpack example here: https://github.com/zenozeng/p5.js-svg/tree/main/examples/webpack (and sorry for my late response).