[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.