Using Plugins in latest versions of Next.js

[pareeksubodh]

Have followed the steps in the @p5-wrapper/react documentation. However getting stuck at the top level await step. As that's not supported in the latest versions of nextjs using swc (instead of webpack)

Is there a way you can suggest I can import the sound plugin without top level await and get it to work.

[jamesrweb]

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.

[pareeksubodh]

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/@p5-wrapper+react@4.2.0_react-dom@18.2.0_react@18.2.0/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.

[jamesrweb]

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/@p5-wrapper+react@4.2.0_react-dom@18.2.0_react@18.2.0/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.