Firefox logs error: this._renderer is undefined after invoking resizeCanvas

[milgner]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.3

Web browser and version

Firefox 134.02

Operating system

Linux

Steps to reproduce this

This only seems to happen on Firefox: tried it with Chromium and everything was fine.

Steps:

1. implement a windowResized callback that calls resizeCanvas on the instance
2. call some drawing function like background afterwards
3. drawing works just fine, but the console logs an error:

Uncaught TypeError: this._renderer is undefined
    p5 vendors-node_modules_pnpm_rspack_core_1_2_2__swc_helpers_0_5_15_node_modules_rspack_core_dist-17b099.js:230
    initializeCanvas App.tsx:11
    windowResized App.tsx:26
    p5 vendors-node_modules_pnpm_rspack_core_1_2_2__swc_helpers_0_5_15_node_modules_rspack_core_dist-17b099.js:230
    g p5.min.js:2
    App App.tsx:38
    React 11
    performWorkUntilDeadline scheduler.development.js:44
    React 2
    __webpack_require__ index.js:207
    fn index.js:367
    scheduler React
    __webpack_require__ index.js:207
    fn index.js:367
    React 2
    __webpack_require__ index.js:207
    fn index.js:367
    dom React
    __webpack_require__ index.js:207
    fn index.js:367
    tsx index.js:142
    __webpack_require__ index.js:207
    __webpack_exports__ index.js:1471
    O index.js:787
    <anonymous> index.js:1472
    <anonymous> index.js:1473
p5.min.js:2

Snippet:

Full project at https://github.com/milgner/react-p5-sandbox/blob/main/src/App.tsx

  function initializeCanvas(p: p5) {
    p.background(200); // error logged here when called after resizeCanvas
    p.noFill();
  }

const Sketch = (p: p5) => {
    p.setup = () => {
      const { width, height } = p5Ref.current!.getBoundingClientRect();
      p.createCanvas(width, height);
      initializeCanvas(p);
      p.describe('Testing from React');
    };
    p.windowResized = () => {
      const { width, height } = p5Ref.current!.getBoundingClientRect();
      console.log('Window resized');
      p.resizeCanvas(width, height);
      initializeCanvas(p);
    };
    p.draw = () => {
      const { width, height } = p5Ref.current!.getBoundingClientRect();
      p.circle(30, 30, 40);
      p.circle(width - 30, height - 30, 40);
      p.circle(width - 30, 30, 40);
      p.circle(30, height - 30, 40);
    };
  };

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!