'SyntaxError: Cannot use import statement outside a module' after first successful Next.js compiling

Viewed 150

I'm using a library for React/Next.js with typescript to fetch Instagram media from posts called react-instagram-media for a website project.

The package's Docs says to import the component with...

import { InstagramMedia } from 'react-instagram-media';

The component compiles the first time without problems as I run yarn dev command. It renders correctly on hocalhost:3000/ but after saving any file and hot-reloading (even with no changes applied) or refreshing the browser tab, it throws this error:

..\node_modules\react-instagram-media\src\index.js:1
import instagramMediaParser from './helpers/instagramMediaParser'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.react-instagram-media (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:1555:18)
    at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
    at Module../src/components/InstagramPost.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:762:79)
    at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
    at Module../src/components/IgPostsBanner.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:714:72)
    at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
    at Module../src/pages/index.tsx (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:1261:83)
    at __webpack_require__ (D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:23:31)
    at D:\Dev\ZULIA\zuliaweb\.next\server\pages\index.js:91:18

The file referenced ..\node_modules\react-instagram-media\src\index.js:1 only has this:

import instagramMediaParser from './helpers/instagramMediaParser'
import InstagramMedia from './components/InstagramMedia'

export {
  instagramMediaParser,
  InstagramMedia
}

... and its the same code during the first successful and all subsecuent failing compilings, as far as I could check.

The only way I've found to successfully compile it again is to remove (or comment out) the import statement and its imported component and recompile it again (by hot-reloading). It doesnt matter where I use the import statement and Component (at index.tsx or any sub-level), it always crashes after the first successful compiling.

I'm new to Next and typescript so any help would be appreciated. Thanks!

0 Answers
Related