Error in nextjs

[PaoloGinefra]

Hi there, I tried adding p5 support to a project done in nextjs/typescript. I've followed your guide in the next page but it still gives me the same error regarding @p5wrapper/react.

The error is the following:

./node_modules/@p5-wrapper/react/dist/component/react.js
Module parse failed: Identifier 'je' has already been declared (7762:41)
|                                 if (F ? k || ($ = !0, A(), k = !0) : $ = !!je.first, H = Math.max(0, Math.floor(H)), Q = Math.max(0, Math.floor(Q)), $) {
|                                     if (!re) throw new Error("First frame must include a { palette } option");
>                                     var [je, we, fe, De, he = 8] = [
|                                         G,
|                                         H,

No matter what I try it doesn't go away and I don't seem to find any references online

[jamesrweb]

Hi there 👋

That is indeed a weird one. I just tested locally on a fresh project and nothing crashed so not sure what's happening with yours.

• Can you share your repo / code?
• What did you do to get to this point?
• Did you ensure the project you're integrating to isn't the issue source?

[jborichevskiy]

Hi! Getting this as well on a fresh NextJS project. Here's the relevant source + versions:

./components/guide.js

import * as React from "react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";

function sketch(p5) {
  p5.setup = () => p5.createCanvas(600, 400, p5.WEBGL);

  p5.draw = () => {
    p5.background(250);
    p5.normalMaterial();
    p5.push();
    p5.rotateZ(p5.frameCount * 0.01);
    p5.rotateX(p5.frameCount * 0.01);
    p5.rotateY(p5.frameCount * 0.01);
    p5.plane(100);
    p5.pop();
  };
}

export default function GuideSketch() {
  return <NextReactP5Wrapper sketch={sketch} />;
}

page.js

'use client';

import GuideSketch from '../components/guide';

const Home = () => {
  return (
    <div>
      <h1>My p5.js Sketch in Next.js</h1>
      <GuideSketch />
    </div>
  );
};

export default Home;

jonbo@jonbo-mbp mib-editor-canvas % node --version
v18.17.0

versions output

jonbo@jonbo-mbp mib-editor-canvas % npm list --depth=0 mib-editor-canvas@0.1.0 /Users/jonbo/Github/mib-editor-canvas ├── @p5-wrapper/next@1.0.2 -> ./node_modules/.pnpm/@p5-wrapper+next@1.0.2_@p5-wrapper+react@4.3.2_next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/@p5-wrapper/next ├── @p5-wrapper/react@4.3.2 -> ./node_modules/.pnpm/@p5-wrapper+react@4.3.2_react-dom@18.2.0_react@18.2.0/node_modules/@p5-wrapper/react ├── @types/node@20.11.8 -> ./node_modules/.pnpm/@types+node@20.11.8/node_modules/@types/node ├── @types/react-dom@18.2.18 -> ./node_modules/.pnpm/@types+react-dom@18.2.18/node_modules/@types/react-dom ├── @types/react@18.2.48 -> ./node_modules/.pnpm/@types+react@18.2.48/node_modules/@types/react ├── autoprefixer@10.4.17 -> ./node_modules/.pnpm/autoprefixer@10.4.17_postcss@8.4.33/node_modules/autoprefixer ├── next@14.1.0 -> ./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next ├── postcss@8.4.33 -> ./node_modules/.pnpm/postcss@8.4.33/node_modules/postcss ├── react-dom@18.2.0 -> ./node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom ├── react@18.2.0 -> ./node_modules/.pnpm/react@18.2.0/node_modules/react ├── tailwindcss@3.4.1 -> ./node_modules/.pnpm/tailwindcss@3.4.1/node_modules/tailwindcss └── typescript@5.3.3 -> ./node_modules/.pnpm/typescript@5.3.3/node_modules/typescript

full error from build command (sorry for messy formatting)

jonbo@jonbo-mbp mib-editor-canvas % pnpm build

mib-editor-canvas@0.1.0 build /Users/jonbo/Github/mib-editor-canvas

next build

▲ Next.js 14.1.0
Creating an optimized production build ...

Failed to compile.
./node_modules/.pnpm/@p5-wrapper+react@4.3.2_react-dom@18.2.0_react@18.2.0/node_modules/@p5-wrapper/react/dist/component/react.js

Module parse failed: Identifier 'je' has already been declared (7759:41)

File was processed with these loaders:

./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js
./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js

You may need an additional loader to handle the result of these loaders.

|                                 if (F ? k || ($ = !0, A(), k = !0) : $ = !!je.first, H = Math.max(0, Math.floor(H)), Q = Math.max(0, Math.floor(Q)), $) {

|                                     if (!re) throw new Error("First frame must include a { palette } option");


                                var [je, we, fe, De, he = 8] = [


|                                         G,

|                                         H,
Import trace for requested module:

./node_modules/.pnpm/@p5-wrapper+react@4.3.2_react-dom@18.2.0_react@18.2.0/node_modules/@p5-wrapper/react/dist/component/react.js

./node_modules/.pnpm/@p5-wrapper+next@1.0.2_@p5-wrapper+react@4.3.2_next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/@p5-wrapper/next/dist/next.js

./src/components/guide.js

./src/app/page.tsx

Build failed because of webpack errors

Any help appreciated - let me know if I can provide any more source.

Potentially another clue: my first approach was using https://www.npmjs.com/package/p5 directly with the following intermediary component:

import React, { useEffect } from 'react';
import p5 from 'p5';
import sketch from './sketch';

const MyP5Component = () => {
  useEffect(() => {
    new p5(sketch);

    return () => { /* Cleanup sketch if necessary */ };
  }, []); // Empty dependency array means it will run once on mount

  return <div id="canvasContainer" />;
};

export default MyP5Component;

And this had a similar (but not identical) error:

./node_modules/.pnpm/p5@1.9.0/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,
This error occurred during the build process and can only be dismissed by fixing the error.

So that leads me to believe this might be upstream of this wrapper package.

Thanks again!

[jborichevskiy]

Found this thread. Downgrading next to 14.0.4 as the commenter mentioned fixed the issue.

[jamesrweb]

Firstly: what an amazing and detailed outline of the issue, thank you for that 🙏🏻❤️

Secondly: so it's a NextJS upstream issue, interesting.

Which of these would you like me to do:

• Add this to the documentation?
• Pin the NextJS version?

I wouldn't do both and option 2 might annoy some people with fresh next installs but I don't know, what do you think? Is there another option you'd suggest other than these?

[jborichevskiy]

You're very welcome!

My gut goes to option 1 since it's not totally clear that it breaks for everyone yet and there might be other stuff people are expecting in the latest version of Next that wouldn't be there.

Perhaps a message near the install commands to the effect of, there's a known issue with the latest version of Next. Pinning to version 14.0.4 is a current known workaround. {full command example} / any more context.

[PaoloGinefra]

Downgrading to next@14.0.4 fixes the issue, thanks a lot to everyone who kindly responded :)

[jamesrweb]

I'll update the docs today, thank you for the input everyone 🙏🏻