-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
how to fix "ReferenceError: require is not defined in ES module scope, you can use import instead" #230
Comments
As the error says, you need to use If you insist on using ...
"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 |
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 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! |
@bhison please provide a working example via repl.it or stack blitz or similar for review |
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 ? |
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 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...
|
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! |
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
Issue loks like this:
The text was updated successfully, but these errors were encountered: