SyntaxError: Cannot use import statement outside a module (possibly caused by Next.js?)

[nkkollaw]

I'm getting this error after I install the component.

I'm using CRA, and I'm not sure if this is caused by Next.js, since the example app works for me.

This is the log:

Module._compile
internal/modules/cjs/loader.js:892:18
Module._extensions..js
internal/modules/cjs/loader.js:973:10
Module.load
internal/modules/cjs/loader.js:812:32
Function.Module._load
internal/modules/cjs/loader.js:724:14
Module.require
internal/modules/cjs/loader.js:849:19
require
internal/modules/cjs/helpers.js:74:18
react-authorize-net
webpack:/external "react-authorize-net":1

> 1 | module.exports = require("react-authorize-net");


View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];

[nkkollaw]

I haven't. I'm just calling the API directly Too bad, but I guess not enough people use Next.js.

[lleseg]

I'm sorry @nkkollaw, I deleted my comment (though it seems you have the notification anyway) because I think this issue was solved in #7 and I'm still testing the solution.

For now I haven't had the error again, maybe you can try that too?

[nkkollaw]

Gotcha, NP.

[tonymckendry]

I solved this in NextJS by using a dynamic import: const Hosted = dynamic(() => import('react-authorize-net').then(p => p.AcceptHosted), { ssr: false })