Next.js with typescript problem

[patbsh]

Hello, I have pretty much an empty project with next.js + typescript. I installed tsparticles and tried rendering the demo component, but there is a problem.
On the first import:
import Particles, { initParticlesEngine } from "@tsparticles/react";

I get this error:
The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@tsparticles/react")' call instead.

I'm not sure if this is due to next.js. What would be the best way around it? It is not particularly vital for me to use this package, just thought it would be a fun addition to a small site I'm creating in my spare time.

For reference, the whole file looks like this currently:

"use client";

import { useEffect, useMemo, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
// import { loadAll } from "@/tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
// import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
// import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.

export default function ParticlesComponent() {
  const init = useCallback(async (engine: Engine) => {
    await loadFull(engine);
  }, []);

  return (
    <Particles
      init={init}
      options={{
        background: {
          color: {
            value: "#fff",
          },
          opacity: 1,
        },
        fpsLimit: 120,
        fullScreen: {
          enable: true,
          zIndex: 1,
        },
        interactivity: {
          detectsOn: "canvas",
          events: {
            onClick: {
              enable: true,
              mode: "bubble",
            },
            onHover: {
              enable: false,
              mode: "bubble",
              parallax: {
                enable: false,
                force: 60,
                smooth: 10,
              },
            },
            resize: {
              enable: true,
              delay: 0.5,
            },
          },
          modes: {
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
            bubble: {
              distance: 100,
              duration: 10,
              opacity: 0.8,
              size: 15,
            },
            trail: {
              delay: 1,
              quantity: 1,
            },
          },
        },
        particles: {
          color: {
            value: "#dsdsa",
          },
          links: {
            color: "#000",
            distance: 150,
            enable: false,
            opacity: 0.5,
            width: 0,
          },
          collisions: {
            enable: false,
          },
          move: {
            angle: {
              offset: 0,
              value: 25,
            },
            direction: "top",
            enable: true,
            outModes: {
              default: "out",
            },
            random: false,
            speed: 1.5,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 1000,
            },
            value: 40,
          },
          opacity: {
            random: {
              enable: true,
              minimumValue: 0.1,
            },
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            value: { min: 1, max: 5 },
          },
          twinkle: {
            particles: {
              enable: true,
              frequency: 0.5,
              opacity: 1,
            },
          },
          wobble: {
            distance: 3,
            enable: true,
            speed: {
              angle: 50,
              move: 10,
            },
          },
        },
        detectRetina: true,
      }}
    />
  );
}

I'd be most grateful for any help.

[matteobruni]

I think I need to check the output of the library, maybe it's missing a CommonJS compatible output. There are two Next.js samples here: https://github.com/tsparticles/react/tree/main/apps, maybe they could help.

[patbsh]

I tested the implementation from said sample and it works great. FYI the error is still there, but as you said it is probably just a missing compatible output. Thank you for such a prompt response.