Font.textBounds() throws "J is not defined"

[marcabisamra]

Expected Behavior

The Font.textBounds() method should return the bounding box of the specified text when called, allowing for accurate text positioning and layout calculations

Actual Behavior

Instead of returning the bounding box, calling Font.textBounds() throws a React.js error:

react.js:15120 Uncaught ReferenceError: J is not defined at S.value (react.js:15120:11)

This error prevents the proper calculation of text bounds and disrupts the functionality of sketches that rely on this method when using the @p5-wrapper/react package.

Steps to Reproduce the Problem

1. Create a p5.js sketch using the @p5-wrapper/react components.
2. Load a font using p5.loadFont() in the sketch.
3. Attempt to use the Font.textBounds() method on the loaded font.
4. Observe the console for the error message.

Example code snippet:

import React from 'react';
import { ReactP5Wrapper } from "@p5-wrapper/react";

function sketch(p5) {
  let myFont;

  p5.preload = () => {
    myFont = p5.loadFont('path/to/font.ttf');
  }

  p5.setup = () => {
    p5.createCanvas(400, 400);
    p5.textFont(myFont);
    let bounds = myFont.textBounds('Hello', 0, 0, 32);
    // This line throws the error
  }

}

function App() {
  return <ReactP5Wrapper sketch={sketch} />;
}

export default App;

Specifications

• Package Version: 4.4.2 (tried most published @p5-wrapper/react versions)
• React version: 18.3.1
• p5.js version: 1.4.1
• Browser: Chrome 127.0.6533.120
• OS: MacOS 14.5

Additional Notes

• Using this with @p5-wrapper/next
• The error seems to be related to the interaction between React and p5.js when using the wrapper.
• It's unclear if this issue is specific to the wrapper or if it's a more general problem with using p5.js in React applications.

Possible Workarounds

While investigating this issue, using p5.textWidth() in combination with the font size might serve as a temporary workaround for some use cases, although it doesn't provide the full functionality of textBounds().

Attempts to Resolve

• I have tried this with multiple versions of the @p5-wrapper/react package, but the issue persists.
• I have verified that the font is loading correctly and that other font-related functions work as expected.

Impact

This issue significantly impacts projects that rely on accurate text bounding boxes for layout and positioning, especially when working with custom fonts or complex text arrangements in p5.js sketches within React applications.

[jamesrweb]

There was an issue like this previously and it was to do with how p5 was being bundled upstream. I don't get this issue locally but I believe it's happening for you since I know this previous issue. Have you tried downgrading your p5 version to see if that helps? This library has a peer on p5 and so different people use different versions from project to project.

[marcabisamra]

There was an issue like this previously and it was to do with how p5 was being bundled upstream. I don't get this issue locally but I believe it's happening for you since I know this previous issue. Have you tried downgrading your p5 version to see if that helps? This library has a peer on p5 and so different people use different versions from project to project.

Indeed i've checked many versions of p5! Same issue all across versions.

[jamesrweb]

I have to assume it's something to do with the bundling. I will re-release a v5 version in the next days / weeks assuming #491 moves relatively smoothly through the review process. Then try again after that deploys because I assume this is a bundling issue like last time and also, the 4.x.x line won't be worked on except for 4.x.x library specific bugs for now since v5.x.x is the focus now and 4.x.x is extremely stable.

[jamesrweb]

Closing due to inactivity.