Cannot use import statement outside a module

[mzeeshanid]

I used this component in my react website and it is working fine. I am migrating my site to next however, while using this component it gives the following error:

Steps to reproduce:

• Install the library with yarn add react-github-btn
• Stop the server with Control + C
• Run the server again and visit the page that is consuming github buttons

The strange thing is, it works with the following steps:

• Run the server with yarn dev
• Install the library with yarn add react-github-btn
• Use it normally and it works

The moment I restart the server same error pops up again ;(

While searching about the error on stackoverflow I found that people suggesting to add type -> module in the package.json file however it does not resolve this issue. In this case I get internal server error.

Here is the video for reference:

https://user-images.githubusercontent.com/2767152/110960363-7b1ce880-8370-11eb-905d-c3ead7288ab7.mov

[ntkme]

You need to use next-transpile-modules to transpile ES module inside node_modules.

[mzeeshanid]

@ntkme thanks. If you can add some explanation it will be awesome :)

For anyone who is experiencing the similar issue follow the steps:

• Install the next-transpile-modules with command yarn add next-transpile-modules
• In your project's root directory, next to package.json add a new file with name (next.config.js [docs])(https://nextjs.org/docs/api-reference/next.config.js/introduction)
• Paste the following code and save the file:

  const withTM = require("next-transpile-modules")(["react-github-btn"]);
  module.exports = withTM();

• Restart your server