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

Created on 11 Feb 2019  ·  58Comments  ·  Source: vercel/next.js

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?

p0 upstream

Most helpful comment

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

All 58 comments

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

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]

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

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

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.

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

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.)

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.

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.

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!

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

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.

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.

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.

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.

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

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

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

@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.

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.

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.

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

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

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

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

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

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

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.

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

confirmed: 8.0.3 fixes this issue

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

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.

Same as @Soundvessel

Installing acorn prior next@8 fixed the issue.

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

@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.

@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.

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

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.

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

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.

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.

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

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!

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.

@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!!! 🎉

I used Yarn to install dependencies too and it works)

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.

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:

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. 👏👏

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

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

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

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

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

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.

@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

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

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.

Was this page helpful?
0 / 5 - 0 ratings