Cannot use import statement outside a module

[peinan]

Hello, I'm creating a blog with React / Next.js. The problem below occurred when loading images. Is there any idea to solve this?

Error message:

/path/to/node_modules/react-image-appear/src/ReactImageAppear.js:7
import React, { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.react-image-appear (/path/to/.next/server/pages/blog.js:751:18)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/blog/index.tsx:12:76)
    at Object../src/pages/blog/index.tsx (/path/to/.next/server/pages/blog.js:535:1)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/path/to/.next/server/pages/blog.js:815:52)
    at /path/to/.next/server/pages/blog.js:816:28
    at Object.<anonymous> (/path/to/.next/server/pages/blog.js:819:3)
    at Module._compile (internal/modules/cjs/loader.js:999:30)

[ArunMichaelDsouza]

Hi @peinan, if the module is being used directly inside a script tag then you need to specify type="module" for it to work -

<script type="module" src="path/to/script"></script>

[Sooraj-s-98]

Hello, I'm creating a blog with React / Next.js. The problem below occurred when loading images. Is there any idea to solve this?

Error message:

/path/to/node_modules/react-image-appear/src/ReactImageAppear.js:7
import React, { Component } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.react-image-appear (/path/to/.next/server/pages/blog.js:751:18)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/blog/index.tsx:12:76)
    at Object../src/pages/blog/index.tsx (/path/to/.next/server/pages/blog.js:535:1)
    at __webpack_require__ (/path/to/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/path/to/.next/server/pages/blog.js:815:52)
    at /path/to/.next/server/pages/blog.js:816:28
    at Object.<anonymous> (/path/to/.next/server/pages/blog.js:819:3)
    at Module._compile (internal/modules/cjs/loader.js:999:30)

i have some issue

[ArunMichaelDsouza]

The problem is that the module is being loaded on the server side (in the nodejs context). Try loading it dynamically and then use it in your app -

import dynamic from 'next/dynamic';

const ReactImageAppear = dynamic(() => import('react-image-appear'), {
  ssr: false
});

This will load the module lazily on the client side and it will work as expected. Hope this helps!