[p5.js 2.0 Bug Report]: `require('../../translations/dev')` breaks ESM usage in browser-based tools like Vite

[nakednous]

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

2.0.2

Web browser and version

Firefox 138.0.3

Operating system

Archlinux

Steps to reproduce this

Steps:

1. Create a modern frontend project (e.g., with Vite).
2. Install p5 v2.0.2.
3. Import with:

import p5 from 'p5'

4. Run npm run dev.

Snippet:

import p5 from 'p5'

new p5(p => {
  p.setup = () => p.createCanvas(400, 400)
  p.draw = () => p.background('white')
})

Result:

Vite build fails immediately:

✘ [ERROR] Could not resolve "../../translations/dev"

node_modules/p5/lib/p5.esm.js:76212:36:
76212 │     let completeResources = require('../../translations/dev');

Cause:

The ESM build includes this CommonJS line:

// When the library is built in development mode ( using npm run dev )
// we want to use the current translation files on the disk, which may have
// been updated but not yet pushed to the CDN.
let completeResources = require('../../translations/dev');

This require() is invalid in ESM and unresolved in Vite/browser tools.

Note:

Manually replacing this line with let completeResources = {}; allows the build to proceed — but this is just a workaround, not a real fix.

[limzykenneth]

Hmm...This should have been fixed by #7764. I'll have a look.

[limzykenneth]

@nakednous I'm not able to replicate this with a minimal vite and p5 setup. Are you able to share more details or possibly provide a full minimal replication project so I can try again?

[nakednous]

The issue may have been caused by a custom alias in vite.config.js:

resolve: {
  alias: {
    'p5': path.resolve(__dirname, 'node_modules/p5/lib/p5.esm.js')
  }
}

Removing vite.config.js entirely and letting Vite handle the p5 module resolution automatically resolves the issue. The bug was not related to p5.js itself.

Thanks for the clarification and support!

[limzykenneth]

@nakednous No worries, although I'd expect importing p5.esm.js to work as well unless there are other things that vite doesn't like in there. I'll have a look into it when I have some time which I planned to do anyway to make sure ESM all work correctly.