Has anybody adapted sine-waves for a React app? (Nextjs or Gatsby?)

[DavidSabine]

I'd like to use sine-waves in a Nextjs project. References to 'window' object produce build errors (to be expected). Would love to know if anyone has adapted this sine-waves module for use in React?

[Knamer95]

Maybe kinda late but I just did for React (not Next.js though)! If you still want it, I can share it :)

[DavidSabine]

Maybe kinda late but I just did for React (not Next.js though)! If you still want it, I can share it :)

Hi. In a React app, the 'window' object is always present and therefore the sine-waves module can work as written.

In a Next.js build, however, the app is built on the server-side and shipped to the web browser as a static bundle. (Most of it is served as a static bundle ... it can get complicated.)

So, when a Next.js app is building, there's no 'window' available. (It's just running browserless in the Node environment.)

I'd be happy to see your project if you want to share it, but unless the sine-waves module is heavily modified (to never reference the 'window' object; or to conditionally reference the 'window' object) then your project likely doesn't solve for the use case I have in mind.

[Knamer95]

Oh I'm afraid it won't work then, sorry. It still uses the 'window' object, I only made small adjustments so it would work in a React App, with exports and stuff.

I've never worked with Next.js (tho I want to in a near future), so I didn't know. Thank you for explaining it, I learned something new :)

[SchuylerGood]

Maybe kinda late but I just did for React (not Next.js though)! If you still want it, I can share it :)

Would you mind sharing with me? I have been getting this error on my current project with the sine-waves function being undefined... Any help would be great! :)

[Knamer95]

Maybe kinda late but I just did for React (not Next.js though)! If you still want it, I can share it :)

Would you mind sharing with me? I have been getting this error on my current project with the sine-waves function being undefined... Any help would be great! :)

Sure! I uploaded it to a private repo and invited you. I added an example of how to use it from a previous project.

I made this a while ago when I was starting with React, so I'm not sure how good it is. In any case, if you have any doubt or suggestion, feel free to ask and I'll gladly try to help :).

[foyst]

In case this is of use to anyone, I hit this issue and discovered Next.js Dynamic Imports https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

You can use this to ensure the library is only run in the client, not server-side.

I created a component which encapsulated the sine-waves code:

ui/sinewave.tsx

import { useEffect } from 'react';
import InitSineWave from '../SineWave';

export default function(props: any) {

    useEffect(() => {
        InitSineWave();
    }, [])

    return (
        <div className="js-modal js-h-screen | md:h-full fixed w-full inset-0 z-40">
            <canvas className="js-sinewave | absolute inset-0 w-full h-full z-0"></canvas>
        </div>
    )
}

Then in the component that uses it, I added the following:

export function myComponent() {
  ...
  const DynamicSinewave = dynamic(() => import('/ui/sinewave'), { ssr: false });
  ...
  return (
  ...
  <DynamicSinewave />
  ...
  )
}

[Overdrive141]

In case this is of use to anyone, I hit this issue and discovered Next.js Dynamic Imports https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

You can use this to ensure the library is only run in the client, not server-side.

I created a component which encapsulated the sine-waves code:

ui/sinewave.tsx

import { useEffect } from 'react';
import InitSineWave from '../SineWave';

export default function(props: any) {

    useEffect(() => {
        InitSineWave();
    }, [])

    return (
        <div className="js-modal js-h-screen | md:h-full fixed w-full inset-0 z-40">
            <canvas className="js-sinewave | absolute inset-0 w-full h-full z-0"></canvas>
        </div>
    )
}

Then in the component that uses it, I added the following:

export function myComponent() {
  ...
  const DynamicSinewave = dynamic(() => import('/ui/sinewave'), { ssr: false });
  ...
  return (
  ...
  <DynamicSinewave />
  ...
  )
}

Hey. Thanks for sharing this. Could you also share how your init sinewave code looks like? I am unable to initialize it properly.