how to fix "ReferenceError: require is not defined in ES module scope, you can use import instead"

[tristansizik]

I'm currently running on Next.js. Thought it'd be seemless but I can't seem to change the type to commonjs.

ReferenceError: require is not defined in ES module scope, you can use import instead is popping up on my launch to vercel

Steps to Reproduce the Problem

1. Running the react-p5-wrapper on nextjs with npm version 9.5.0.

Issue loks like this:

[jamesrweb]

As the error says, you need to use import / export (ESM) syntax in your nextJS app instead of require (CJS). The require syntax is for commonJS modules and the import / export are for native ESM modules.

If you insist on using require in your application, which is not standard anymore in the nextJS world, you can try setting "type": "commonjs" in your package.json. Note that this is not guaranteed to work since most packages default to ESM over CJS nowadays and some don't offer CJS at all anymore. This package does offer a CJS version and as long as your configuration is set correctly, it should be the one used at compile time on your end. Here is the relevant files we export for each version, as you can see in the package.json of this project:

  ...
  "main": "dist/react-p5-wrapper/index.js", // CommonJS
  "browser": "dist/react-p5-wrapper/index.browser.js", // ESM
  "module": "dist/react-p5-wrapper/index.module.js", // ESM
  ...

Your mileage elsewhere may vary with other libraries though since as mentioned, not all support CJS anymore. See more on the type configuration option here.

[bhison]

Hello, I've come to this same issue myself today and I don't quite understand the response or what I can action off the back of it. I too am using Next JS and am getting the same error ReferenceError: require is not defined in ES module scope, you can use import instead

I am not using require syntax, of course, yet I am getting this compile issue with the main index.js file of this library as it is using require syntax:

// index.js
use strict";var e=require("react"),r=require("microdiff"),t=require("p5");var n=function()...

Any advice appreciated. I may attempt using earlier versions to see if that helps. Thanks!

[jamesrweb]

@bhison please provide a working example via repl.it or stack blitz or similar for review ☺️

[jhrtn]

I'm having this same problem. The error seems to come when using Next.js with Typescript. I set up a codesandbox with just next.js and it worked fine, but with typescript this error appears.

https://codesandbox.io/p/sandbox/hardcore-leftpad-ghtnze?file=%2Fpages%2Findex.tsx

Related to this vercel/next.js#39375 ?

[disambiguator]

I've had this issue with nextJS since the beginning of the project and solved it by running it as a clientside import.

Create a new file called p5_wrapper.tsx or whatever and do:

import dynamic from 'next/dynamic';
import { type ReactP5Wrapper as ReactP5WrapperType } from 'react-p5-wrapper';

export const ReactP5Wrapper = dynamic(
  () => import('react-p5-wrapper').then((mod) => mod.ReactP5Wrapper),
  {
    ssr: false,
  },
) as typeof ReactP5WrapperType;

and then use it throughout your project as...

import { ReactP5Wrapper } from 'p5_wrapper';

[jamesrweb]

I have made a NextJS specific package to complement this one, please try it out and if there are any issues, please make a PR or raise an issue there!