Comments (3)
You could wrap the top level await in an async function and then await inside there then if that's the issue you're seeing.
from next.
I tried an IIFE statement based on what you suggested, not sure if that's what you intended
'use client';
import * as p5 from 'p5';
import { ReactP5Wrapper, Sketch } from '@p5-wrapper/react';
import React, { useEffect, useState } from 'react';
(window as any).p5 = p5;
(async () => {
await import('p5/lib/addons/p5.sound');
})();
const sketch: Sketch = (p5) => {
let song: p5.SoundFile;
let button: p5.Element;
p5.setup = () => {
p5.createCanvas(600, 400, p5.WEBGL);
p5.background(255, 0, 0);
button = p5.createButton('Toggle audio');
button.mousePressed(() => {
if (!song) {
const songPath = '../../../public/audio/lori.mp3';
song = p5.loadSound(
songPath,
() => {
song.play();
},
() => {
console.error(
`Could not load the requested sound file ${songPath}`
);
}
);
return;
}
if (!song.isPlaying()) {
song.play();
return;
}
song.pause();
});
};
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 Page() {
return <ReactP5Wrapper sketch={sketch} />;
}
Getting this error
VM737 page.tsx:29 Uncaught TypeError: p5.loadSound is not a function
at d.default.Element.eval (webpack-internal:///(app-client)/./app/digital-art/test/page.tsx:29:27)
at d.default.Element.eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@p5-wrapper/react/dist/component/react.js:10650:100)
If you could share the actual code snippet you have in mind, that would be great.
from next.
I tried an IIFE statement based on what you suggested, not sure if that's what you intended
'use client'; import * as p5 from 'p5'; import { ReactP5Wrapper, Sketch } from '@p5-wrapper/react'; import React, { useEffect, useState } from 'react'; (window as any).p5 = p5; (async () => { await import('p5/lib/addons/p5.sound'); })(); const sketch: Sketch = (p5) => { let song: p5.SoundFile; let button: p5.Element; p5.setup = () => { p5.createCanvas(600, 400, p5.WEBGL); p5.background(255, 0, 0); button = p5.createButton('Toggle audio'); button.mousePressed(() => { if (!song) { const songPath = '../../../public/audio/lori.mp3'; song = p5.loadSound( songPath, () => { song.play(); }, () => { console.error( `Could not load the requested sound file ${songPath}` ); } ); return; } if (!song.isPlaying()) { song.play(); return; } song.pause(); }); }; 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 Page() { return <ReactP5Wrapper sketch={sketch} />; }Getting this error
VM737 page.tsx:29 Uncaught TypeError: p5.loadSound is not a function at d.default.Element.eval (webpack-internal:///(app-client)/./app/digital-art/test/page.tsx:29:27) at d.default.Element.eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@p5-wrapper/react/dist/component/react.js:10650:100)
If you could share the actual code snippet you have in mind, that would be great.
There is a full and tested example in the documentation for the p5-wrapper/react project, please check the readme and that should help you get things running as expected 🙏🏻.
For nextjs you should just need to use this projects component to get things working.
Should Next be throwing errors then this would need to be raised as an issue on their end as the example in the other repo works across all browsers tested (chrome, safari, firefox, edge) and so should work with this repos next specific component for client side 👏🏻.
My impression is that next is having issues using top level await syntax but without that, we would need to wrap all client code in the IIFE and return the component out of that instead.
Above that, I'm not sure why you're seeing this error since the example on the react project is fine as a stand-alone and when I tested with next 13 back when that example was written, it was also okay.
from next.
Related Issues (10)
- unexpected array behavior inside p5 sketch function HOT 2
- Sketch renders twice when using app router HOT 1
- CI and CD pipelines are broken since Dependabot migration HOT 2
- There are types at 'c:/****/node_modules/@p5-wrapper/next/dist/main.d.ts', but this result could not be resolved when respecting package.json "exports". The '@p5-wrapper/next' library may need to update its package.json or typings.ts
- Failed loading p5 wrapper HOT 1
- Dependency Dashboard HOT 1
- window is not defined & p5.loadSound is not a function HOT 10
- Module not found: Can't resolve '@p5-wrapper/react' HOT 4
- Warning: div: `ref` is not a prop. in Next 14.2.2
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.
from next.