p5.js + NextJS compilation error

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

Web browser and version

No response

Operating system

No response

Steps to reproduce this

Steps:

1. add p5 to a nextjs 14.1.0 project
2. create a simple canvas with a bouncing ball
3. run npm run dev to start the development server
4. the process is interrupted with an error:

$ next dev
   ▲ Next.js 14.1.1-canary.1
   - Local:        http://localhost:3000

 ✓ Ready in 2.2s
 ○ Compiling / ...
 ⨯ ./node_modules/p5/lib/p5.min.js
Module parse failed: Identifier 'o' has already been declared (7314:37)
|                             if (g ? x || (d = !0, w(), x = !0) : d = Boolean(o.first), t = Math.max(0, Math.floor(t)), r = Math.max(0, Math.floor(r)), d) {
|                                 if (!a) throw new Error("First frame must include a { palette } option");
>                                 var [o, h, f, p, m = 8] = [
|                                     v,
|                                     t,

Import trace for requested module:
./node_modules/p5/lib/p5.min.js
./app/p5-error.tsx

Snippet:

This is a fully working example on CodeSandbox which reproduces the problem:

https://codesandbox.io/p/sandbox/dry-tree-rnzjq9

PLEASE NOTE:

I have also raised this issue in the Next.JS repo:

https://github.com/vercel/next.js/issues/60897

Reproduce the failure with the CodeSandbox example and npm run dev, then inspect node_modules/p5/lib/p5.min.js and the import from app/p5-error.tsx. Compare the reported parser error with the related Next.js issue. Done means the example compiles and the development server starts without the duplicate-identifier error.