vercel / react-tweet

Embed tweets in your React application.
https://react-tweet.vercel.app
MIT License
1.49k stars 82 forks source link

Module parse failed: Cannot use 'import.meta' outside a module #80

Open dillionverma opened 1 year ago

dillionverma commented 1 year ago
image
- error ./node_modules/react-tweet/node_modules/@babel/runtime/helpers/interopRequireDefault.js
Module parse failed: Cannot use 'import.meta' outside a module (39:16)
|                 // still a Refresh Boundary later.
|                 // @ts-ignore importMeta is replaced in the loader
>                 import.meta.webpackHot.accept();
|                 // This field is set when the previous version of this module was a
|                 // Refresh Boundary, letting us know we need to check for invalidation or

Getting the following error while running.

package.json:


    "eslint-config-next": "^13.4.2",
    "next": "^13.4.2",
    "next-auth": "^4.22.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-tweet": "^2.0.1",
lfades commented 1 year ago

@dillionverma Can you provide a reproduction 🙏

lakbychance commented 11 months ago

@lfades Hitting the same limitation. SWC is disabled for our project because we rely on babel for a library. I tried to create a reproduction online but couldn't. This is what I was trying -> https://codesandbox.io/p/sandbox/angry-robinson-sk8mrv?file=%2Fpackage.json%3A22%2C36. Basically just added a .babelrc.js similar to our current setup so that next disables SWC on detecting it but I can see atleast the loader of the Tweet component coming. Whereas, in our local dev, we are getting the same error like so :-

Screenshot 2023-07-27 at 3 57 00 PM

We are using the latest version i.e. 13.4.12

Any clue as to what might be happening here ?

lfades commented 11 months ago

Looks like it's something with babel when used in Next.js. The package output of react-tweet does not use import.meta and all files are modules. Did you also add reac-tweet to transpilePackages? although I'm not entirely sure if that one works with babel.

lakbychance commented 11 months ago

Looks like it's something with babel when used in Next.js. The package output of react-tweet does not use import.meta and all files are modules. Did you also add reac-tweet to transpilePackages? although I'm not entirely sure if that one works with babel.

Yup the transpilePackages is already added to next.config.js

jshwrnr commented 11 months ago

Getting this issue as well.

reabreu commented 10 months ago

Hey everyone! I'm also getting this issue, does anyone have an ideia why this is happening?

dillionverma commented 10 months ago

So I resolved this for myself by using app router instead (Nextjs 13).

Not a feasible solution for everyone but just wanted to let people know

reabreu commented 10 months ago

Hey, thanks for the feedback!