next.js Compilation error for Next 14.1.0 and p5.js 1.9.0

Link to the code that reproduces this issue

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

To Reproduce

access the sandbox. The code will run and a page will appear.

Current vs. Expected behavior

Expected result:

a page with a 400x400 canvas where a little ball bounces off the walls

Observed:

a compilation 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
 ⨯ ./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
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename '/workspace/.next/cache/webpack/client-development-fallback/0.pack.gz_' -> '/workspace/.next/cache/webpack/client-development-fallback/0.pack.gz'

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

> NOTE: this is a CodeSandbox machine

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.1.1-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

The error only appeared with the 14.1.0 and the canary versions.

Version 14.0.4 was fine.

Jan 19 '24 16:01 msanguineti

Solved, solution: I was able to solve this problem by removing browserslist:[...] of the package.json and I admit that this version is much more optimal. thanks

Jan 19 '24 17:01 hamizjafari

I'm getting the same error, but using 14.0.4 I don't have browserList in my package.json and when i added:

"browserslist": [
  "Chrome 118"
]

the problem still persists.

Jan 20 '24 00:01 frederickk

Solved, solution: I was able to solve this problem by removing browserslist:[...] of the package.json and I admit that this version is much more optimal. thanks

There is no browserslist explicitly defined by me anywhere. Check the linked sandbox code.

Jan 20 '24 07:01 msanguineti

I'm getting the same error, but using 14.0.4 I don't have browserList in my package.json and when i added:
"browserslist": [
  "Chrome 118"
]
the problem still persists.

That's interesting. Would you be kind enough to create a sandbox example with 14.0.4 that fails? Are you using p5 version 1.9.0? Are you using some other libraries as well? Do you use app or pages (might not be relevant after all)? Which version of TypeScript?

Jan 20 '24 07:01 msanguineti

Having the same issue with 14.1.0, downgrading to 14.0.4 is the only fix so far

Jan 20 '24 16:01 ededejr

Having the same issue when upgraded to 14.1.0

Jan 21 '24 08:01 cody-ta

This issue is not present when compiling using Turbopack, but shows other warning.

 ⨯ ReferenceError: window is not defined
    at 286.core-js/modules/es.array.filter (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:21022:3274)
    at a (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:20:28)
    at D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:21:28
    at 275../constants (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:18942:41)
    at a (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:20:28)
    at D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:21:28
    at 259../accessibility/color_namer (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:17238:30)
    at a (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:20:28)
    at o (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:26:90)
    at D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:28:7
    at D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:6:83
    at Object.<anonymous> (D:\source\sandbox\.next\server\chunks\node_modules_p5_lib_p5_min_44105b.js:7:2)
    at instantiateModule (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:488:23)
    at getOrInstantiateModuleFromParent (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:539:12)
    at esmImport (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:113:20)
    at D:\source\sandbox\.next\server\chunks\app_557e6a._.js:11:142
    at [project]/app/p5-error.tsx [app-ssr] (ecmascript) (D:\source\sandbox\.next\server\chunks\app_557e6a._.js:61:3)
    at instantiateModule (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:488:23)
    at getOrInstantiateModuleFromParent (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:539:12)
    at commonJsRequire (D:\source\sandbox\.next\server\chunks\[turbopack]_runtime.js:127:20)

This warning seems related to #60644 and #60920, but this message also showns on 14.0.5-canary.19, but it compiles using default bundler with this warning:

 ⨯ node_modules\p5\lib\p5.min.js (2:541645) @ 286.core-js/modules/es.array.filter
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (D:\source\sandbox\.next\server\webpack-runtime.js:33:42)
    at eval (./app/p5-error.tsx:9:60)
    at (ssr)/./app/p5-error.tsx (D:\source\sandbox\.next\server\app\page.js:140:1)
    at __webpack_require__ (D:\source\sandbox\.next\server\webpack-runtime.js:33:42)

Summary:

14.0.5-canary.19:

next dev works with warning window is not defined
next dev --turbo works with warning window is not defined

14.0.5-canary.20:

next dev doesn't work with error Module parse failed: Identifier 'o' has already been declared (7313:37)
next dev --turbo still works with same "window" warning.