Comments (7)
Found this thread. Downgrading next
to 14.0.4
as the commenter mentioned fixed the issue.
from react.
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
[email protected] /Users/jonbo/Github/mib-editor-canvas
├── @p5-wrapper/[email protected] -> ./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@p5-wrapper/next
├── @p5-wrapper/[email protected] -> ./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@p5-wrapper/react
├── @types/[email protected] -> ./node_modules/.pnpm/@[email protected]/node_modules/@types/node
├── @types/[email protected] -> ./node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom
├── @types/[email protected] -> ./node_modules/.pnpm/@[email protected]/node_modules/@types/react
├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/autoprefixer
├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next
├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/postcss
├── [email protected] -> ./node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom
├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/react
├── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/tailwindcss
└── [email protected] -> ./node_modules/.pnpm/[email protected]/node_modules/typescript
full error from build command (sorry for messy formatting)
jonbo@jonbo-mbp mib-editor-canvas % pnpm build
[email protected] 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/@[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js
- ./node_modules/.pnpm/[email protected][email protected][email protected]/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/@[email protected][email protected][email protected]/node_modules/@p5-wrapper/react/dist/component/react.js
./node_modules/.pnpm/@p5-wrapper+next@1.0.2_@p5-wrapper[email protected][email protected][email protected][email protected]/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/[email protected]/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!
from react.
jborichevskiy
commented on April 27, 2024
1
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
.
from react.
PaoloGinefra
commented on April 27, 2024
1
Downgrading to [email protected] fixes the issue, thanks a lot to everyone who kindly responded :)
from react.
jamesrweb
commented on April 27, 2024
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?
from react.
jamesrweb
commented on April 27, 2024
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?
from react.
jamesrweb
commented on April 27, 2024
I'll update the docs today, thank you for the input everyone 🙏🏻
from react.
Related Issues (20)
-
Migrate to Vite and Vitest
-
Migrate to the @P5-wrapper npm org
-
Loading image P5-react
-
React's strict mode causes the canvas to be created twice
HOT 4
-
An example of exposing imperative methods from the sketch?
HOT 9
-
unexpected array behavior inside p5 sketch function
HOT 1
-
ReactP5Wrapper has additional pixels in height
HOT 3
-
Could not find a declaration file but the code works
HOT 10
-
Duplicate canvas when running in vite dev
HOT 5
-
TypeError: p5.loadSound is not a function
HOT 3
-
P5-wrapper size
HOT 5
-
Stop rerender of p5 component when redux variables update
HOT 3
-
Latest commits not in the npm registry
HOT 5
-
Issue building with Vite 5
HOT 16
-
npm ERR! Usage Error: This project is configured to use npm
HOT 2
-
windowResized() not firing
HOT 4
-
Change p5 dependency version to minimum 1.4.1
HOT 9
-
Examples directory doesn't exist, link broken on README
HOT 3
-
Module parse failed: Identifier 'XX' has already been declared (7762:41)
HOT 3
Recommend Projects
-
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
-
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
-
Jobs
Jooble
from react.