Next.js: 8.0.0 - dynamic import causing 'You may need an appropriate loader...' error

[dunika]

Bug report

Just upgraded to 8.0.0 and I'm really excited! I've run into an issue though that is preventing my project from compiling

Describe the bug

So when I run dev I am getting the following issue

You may need an appropriate loader to handle this file type.
| 
| 
> import('./noop');
| var _window = window,
|     assetPrefix = _window.__NEXT_DATA__.assetPrefix;

It seems to be coming from webpack 4.29.0 (see here).

It looks like the issue was fixed with this which declared acorn": "^6.0.5 as a dependency but the change doesn't seem to be present on master

Maybe I upgraded too soon?

[dimensi]

I got same problem. Can't start develop mode. I updated npm to the latest version and also tried to install the acorn package, but did not help.
@timneutkens

[AndrewIngram]

I have a different error related to imports which might have the same root cause:

/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

Everything is fine if I downgrade to [email protected]

[timneutkens]

@AndrewIngram can you provide a reproduction? curious to look into that one. It sounds related to @babel/runtime, not webpack.

[incleaf]

I'm facing the same error. Installing acorn doesn't work for me either. FYI, I use ts-node for running my express server.

[TomiTakussaari]

For me this was fixed by upgrading @babel/core:

-        "@babel/core": "^7.1.0",
+        "@babel/core": "7.2.2",

For some reason we have that as direct dependency currently.

[cnasc]

Experiencing same issue and error message. @babel/core is set to "7.2.2" so that may not be the issue.

[iaincollins]

We are also seeing this issue and followed the threads for a workaround.

• Production (with next build) builds and runs fine.
• Running in development mode produces the same error as OP.
• We invoke Next.js programmatically (we use it with Express currently).
• Updating @babel/core to 7.2.2 did not resolve this for us.

Following the the issues linked in the thread and installing [email protected] and @babel/[email protected] as devDependancies did resolve this.

(This also resolved the error about the Acorn package, which we do not have as a direct dependancy.)

[kpoelhekke]

I had the same issue, also after updating webpack and @babel/core. Removing my package-lock.json and node_modules and doing a fresh install solved the issue.

[jescalan]

Same issue here, unfortunately. Here's a replication: https://github.com/jescalan/nextjs-test/tree/je.canary

Static build and export works wonderfully, it's just dev mode that errors. Neither babel nor webpack are installed as dependencies.

[jescalan]

Just fixed with with a removal of package-lock.json and regenerate. The last commit on that branch shows which updates were made to package-lock.json -- hopefully this helps to pin down the cause!

[pdlug]

Removing node_modules and package-lock.json then reinstalling resolved this for me as well.

[bitmap]

Deleting node_modules and package-lock.json didn't resolve this for me, but installing [email protected] as a dev dependency did, as @iaincollins suggested.

[paulschneider]

Also experiencing this problem but outside of this package; Downgrading to a lower version of node (v9.11 [a colleagues working version], installing [email protected] and reinstalling node_modules fixed this for me.

[icflorescu]

I have a different error related to imports which might have the same root cause:

/Users/andrewingram/Repositories/tego/website-next/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";
                                                                      ^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

Everything is fine if I downgrade to [email protected]

Facing the same issue as @AndrewIngram on a complex project. The issue only appears for [email protected] in dev mode, not when compiling for production.

[shaunchurch]

I ran in to the same issue. Removing both node_modules and package-lock.json and reinstalling _did_ fix it for me. It's important to remove both the directory and lock file before reinstalling, just in case that's the issue some are hitting.

[schabluk]

I have the same behaviour in TypeScript files:

error  in ./stores/index.ts

Module parse failed: Export 'IStore' is not defined (77:9)
You may need an appropriate loader to handle this file type.
|   return Store;
| };
> export { IStore, IStoreSnapshotIn, IStoreSnapshotOut };

 @ ./pages/_app.tsx 16:0-37 38:24-32 83:18-26

[timneutkens]

@icflorescu it's impossible to solve the issue without a clear reproduction. Please provide one so that we can investigate further 🙏

[timneutkens]

@icflorescu could you create a new issue for it (including reproduction) because it's not the same as this one 🙏

[icflorescu]

@timneutkens I finally discovered last night that my issue was caused by #6273.
As I mentioned in that thread, the error goes away if I modify my next/babel preset to ['next/babel', { 'transform-runtime': { useESModules: false } }].

EDIT: I just published a test repo, see discussion in #6273.

[BiscuiTech]

In my case, a simple complete re-install of the node_modules directory fixed this issue. It might related to the internal dependencies of the modules and the left over modules.

[goshdarnheck]

I have the same issue (I also get the same error when using dynamic imports, I wrote about it on Spectrum https://spectrum.chat/users/matthew-rapati?thread=c677c233-8b02-447f-aff0-97b3399a493f).

I tried removing node_modules, package-lock.json and clearing my npm cache, but it did not resolve the issue. If I have a chance I will try to create a small reproduction of the issue.

[obedparla]

Installing acorn fixed this issue for me. It is merged already on canary but not yet on master. https://github.com/zeit/next.js/pull/6137

[timneutkens]

Installing acorn in Next.js doesn't solve the issue.

[ograycode]

Where I work, this has impacted us when trying to upgrade to next 8.

[Robbatron]

Using Yarn to install dependencies did the trick for me. Super weird.

[vasco3]

Ok here is the winning combo (made sure is 100% reproducible):
My project already had next v7

1. npm install next@latest -> installs next v8.0.1 but warns about acorn
2. npm run dev -> runs next and fails with the error described in this git issue
3. npm install acorn
4. npm run dev -> runs next and fails with the error described in this git issue
5. npm install next@latest -> no warnings
6. npm run dev it works!!! 🎉

Conclusion
The key is to install acorn before next

[andrewgremlich]

So was it some kind of dependency resolution? @vasco3 that solved my problem.

[KB1RMA]

This happens for me directly between v8.0.0-canary.11 and v8.0.0-canary.12 https://github.com/zeit/next.js/compare/v8.0.0-canary.11...v8.0.0-canary.12

Installing [email protected] and @babel/[email protected] as devDependencies as @iaincollins suggested fixes this for me as well.

[cellog]

still present with next 8.0.2. acorn needs to upgraded in package.json, it fixes the issue

[cellog]

confirmed: 8.0.3 fixes this issue

[Soundvessel]

Issue running dev was still present with next 8.0.3 until I tried @vasco3 's recommendation and installed next AFTER acorn. Strange...

[Soundvessel]

Got 8.0.3 running without Acorn.

It appears NPM was caching next incorrectly. Even when deleting my node_modules folder and package-lock rerunning npm i the issue would persist. Actually using the NPM CLI to uninstall next appears to have removed it from the cache properly and after a reinstall without Acorn it is up and running.

[Magellol]

Same as @Soundvessel

Installing acorn prior next@8 fixed the issue.

npm ci
npm i -S acorn@latest
npm i -S next@latest

[Soundvessel]

@Magellol did you try running dev mode after just the npm ci. If you see my second post I was able to run dev mode with 8.0.3 _without_ acorn after using the npm command line to properly uninstall next because I believe a cached version outside of node_modules was causing the issue. npm ci being a clean install might solve the issue without having to install/uninstall individual packages.

[Magellol]

@Soundvessel Doesn't seem to be working if I don't install acorn explicitely.
I've tried all sorts of combo with npm ci at different stages.

https://github.com/zeit/next.js/issues/6240#issuecomment-466549203 is the only way I could have made it working. Also using yarn fixes it without the need to add acorn explicitely.

[pankaj1433]

@vasco3 Your Solution worked for me. Thanks. :+1:

[Soundvessel]

To clarify I did not need Acorn to resolve the issue. Try to uninstall Next using the command line instead of just deleting node_modules.

npm uninstall --save next
npm install --save next@latest

I believe that using the command line to uninstall Next removes the cause of trouble from an NPM cache outside of node_modules.

I also updated Node and NPM beforehand but that didn't help until I properly reinstalled.

[Yzrsah]

Try removing your .next directory instead of worrying about npm cache.

I resolved the issue:

• bundleAnalyzer was broken from dynamic import
  after fixing,
• server bundle files got left in .next/ causing import('./noop'); error despite reinstall
• remove node_modules and .next

Running next build can cause next dev to fail, but it works if you didn't run next build first:

• If you have a dynamic import error, and you clean the project, then run next dev, you will not see the error
• If you have a dynamic import error, and you clean the project, then run next build, then run next dev, you will see the error

[Soundvessel]

The error popped up again after updating some other modules.

I did delete /.next, /node_modules, package-lock.json, and /npm-cache/ in my user folder then reran npm i and the error persisted.

Gave up and added acorn to my dependencies to prevent the error.

[ivan-kleshnin]

Getting the "iterator" version of this error. None of the above helped:

/Users/username/Sandboxes/mynext/node_modules/@babel/runtime-corejs2/helpers/esm/typeof.js:1
(function (exports, require, module, __filename, __dirname) { import _Symbol$iterator from "../../core-js/symbol/iterator";

Requisites:

1) the most basic server.js with ES modules.

2) .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "next/babel",
  ],
}

3) package.json

{
  "name": "nownext",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.4",
    "acorn": "^6.1.1",
    "express": "^4.16.4",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "webpack": "4.28.4"
  },
  "scripts": {
    "dev": "babel-node server.js",
  }
}

And then

$ babel-node server.js

produces the above error. So it's not even a dynamic import, in my case ES modules stopped working with NextJS entirely. @timneutkens I can upload a demo repo if it may help.

[timneutkens]

@ivan-kleshnin that's another issue: #6273 which is fixed on canary.

[dknell]

I tried just removing package-lock.json and node_modules directory, but that didn't work for me. The solution for me was switching to yarn:

rm package-lock.json
rm -rf node_modules
yarn dev

The error is gone!

[thomasledoux1]

I had the same error when running trying to run the project in https://github.com/zeit/next-learn-demo/tree/master/E2-lazy-loading-modules. After doing an npm dev install of [email protected] it started working again.

[timneutkens]

Will be fixed by https://github.com/zeit/next.js/issues/6940

[alexbaumgertner]

@vasco3 Big thanks! It works for me:

npm install acorn
npm run dev // -> runs next and fails with the error described in this git issue
npm install next@latest // -> no warnings
npm run dev // it works!!! 🎉

[scub111]

I used Yarn to install dependencies too and it works)

[matt-reactlabs]

Ok here is the winning combo (made sure is 100% reproducible):
My project already had next v7

• npm install next@latest -> installs next v8.0.1 but warns about acorn
• npm run dev -> runs next and fails with the error described in this git issue
• npm install acorn
• npm run dev -> runs next and fails with the error described in this git issue
• npm install next@latest -> no warnings
• npm run dev it works!!! 🎉

Conclusion:
The key is to install acorn before next

thanks! proves once again that order matters! saved me.

[naomiHauret]

Ok here is the winning combo (made sure is 100% reproducible):
My project already had next v7

• npm install next@latest -> installs next v8.0.1 but warns about acorn
• npm run dev -> runs next and fails with the error described in this git issue
• npm install acorn
• npm run dev -> runs next and fails with the error described in this git issue
• npm install next@latest -> no warnings
• npm run dev it works!!! tada

Conclusion:
The key is to install acorn before next

This fixed the issue for me too, thanks ! :clap:

[dixitpeeyush]

Ok here is the winning combo (made sure is 100% reproducible):
My project already had next v7

* `npm install next@latest` -> installs next v8.0.1 but warns about acorn

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install acorn`

* `npm run dev` -> runs next and fails with the error described in this git issue

* `npm install next@latest` -> no warnings

* `npm run dev` it works!!! 🎉

Conclusion:
The key is to install acorn before next

Thanks a ton, this fixed the problem. 👏👏

[TidyIQ]

Will this be fixed in the canary branch any time soon?

[Timer]

@TidyIQ we will be trying to fix it soon! It's important to note that this is a npm bug.

[c0b41]

@Timer webpack already fixed this problem see https://github.com/webpack/webpack/pull/9370

[aequasi]

This doesn't seem to fix the issue for me. Dealing with an older code base that can't quite upgrade to the new features yet, and i still need a transpiled server.

I've done the above steps, and they don't solve the issue. I'm not even using dynamic imports :/

Compiling client app. 
Compiling server app. 
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
[ wait ]  compiling ...
[ error ] ./node_modules/next/dist/client/next-dev.js 23:6
Module parse failed: Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
| 
| 
> import('./dev/noop'); // Support EventSource on Internet Explorer 11
| 
| if (!window.EventSource) {
2019-07-13T08:07:59.942Z app:server:log Connected to redis
2019-07-13T08:07:59.947Z app:server:log > Ready on http://localhost:3000

[zargold]

I may have solved this above problem by rm-ing node-modules and re-installing, but maybe not re-installing everything there might be a specific package which is causing this

[Timer]

The final resolution steps should be to rm package-lock.json and rm -rf node_modules, then reinstall.

It's important to note that this is only fixed in Next 9.

[sean-magin]

@Timer I'm running [email protected] and still having the issue. I've tried:
1) removing next, adding acorn with yarn add acorn and then running yarn next@latest to no avail
2) removing all node_modules and yarn.lock and reinstalling. Anybody else still seeing this issue? I've only begun to experience it with react-datepicker

[timneutkens]

@Sm00g15 it's quite hard to help you when a reproduction is not provided. Maybe you installed webpack manually?

[nicktaras]

I had the same issue, also after updating webpack and @babel/core. Removing my package-lock.json and node_modules and doing a fresh install solved the issue.

Thanks, this solution solved the issue for me. I had been working on another Node.js project (not Next.js) where I'd upgraded my version of Node to the latest - this seems to be the cause of the issue. Where the solution to remove the lock.json and node_modules, then re-install the packages worked perfectly. Thanks.