8.0.0 - dynamic import causing 'You may need an appropriate loader...' error #6240

dunika · 2019-02-11T10:11:47Z

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?

The text was updated successfully, but these errors were encountered:

dimensi · 2019-02-11T10:18:38Z

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 · 2019-02-11T10:59:53Z

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 · 2019-02-11T11:23:54Z

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

incleaf · 2019-02-11T14:17:40Z

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 · 2019-02-11T14:50:13Z

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 · 2019-02-11T15:16:52Z

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

iaincollins · 2019-02-11T15:27:50Z

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 · 2019-02-11T17:49:01Z

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 · 2019-02-11T18:18:11Z

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 · 2019-02-11T18:33:10Z

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 · 2019-02-11T18:44:10Z

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

bitmap · 2019-02-11T19:11:24Z

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 · 2019-02-12T03:46:00Z

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 · 2019-02-12T16:39:39Z

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 · 2019-02-12T18:38:56Z

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 · 2019-02-12T19:08:44Z

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 · 2019-02-12T19:17:16Z

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

timneutkens · 2019-02-12T19:17:48Z

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

icflorescu · 2019-02-13T13:57:32Z

@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 · 2019-02-13T17:07:10Z

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 · 2019-02-13T17:14:17Z

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 · 2019-02-14T12:32:36Z

Installing acorn fixed this issue for me. It is merged already on canary but not yet on master. #6137

timneutkens · 2019-02-14T12:58:16Z

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

ograycode · 2019-02-14T15:24:35Z

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

Robbatron · 2019-02-14T17:40:05Z

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

vasco3 · 2019-02-15T05:41:57Z

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

alexbaumgertner · 2019-05-17T10:50:03Z

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

vscode1111 · 2019-05-22T08:00:58Z

I used Yarn to install dependencies too and it works)

ghost · 2019-05-29T20:30:34Z

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.

The current 8.1.1 canary track includes native TypeScript support, which includes official types for Next.js objects and out-of-the-box TypeScript compilation. This is good! But it means we have to adapt some of our existing TypeScript stuff. As of this writing, Next.js enforces that the app directory contain its own tsconfig.json file (vercel/next.js#7333), so this PR adds those as necessary, inheriting from the parent package’s configuration. It also requires a handful of specific configurations, so those are included as well (vercel/next.js#7361) in those files. This change also hoists acorn and acorn-dynamic-import because those two packages need to be in a consistent place relative to each other and webpack. (vercel/next.js#6240) Currently the 'next' module does not export a type for its constructor function, so we switch 'import next' to 'const next = require' to avoid the typechecking. We add "export {}" to the bottom of files that don’t do their own import / exporting to avoid an error due to the required "isolatedModules" setting. (These can be removed if "isolatedModules" is removed.) The bulk of the changes are updating _app and _document classes to the nice new types.

naomiHauret · 2019-06-14T13:44:09Z

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

dixitpeeyush · 2019-07-02T11:59:58Z

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 · 2019-07-05T04:05:45Z

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

Timer · 2019-07-05T04:34:03Z

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

c0b41 · 2019-07-08T18:54:59Z

@Timer webpack already fixed this problem see webpack/webpack#9370

Closes #6240

cryptiklemur · 2019-07-13T08:40:36Z

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 · 2019-07-15T22:22:54Z

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 · 2019-07-15T22:47:23Z

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.

neocybereth · 2019-08-23T06:38:58Z

@Timer I'm running [email protected] and still having the issue. I've tried:

removing next, adding acorn with yarn add acorn and then running yarn next@latest to no avail
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 · 2019-08-23T18:31:34Z

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

nicktaras · 2020-01-07T02:26:20Z

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.

balazsorban44 · 2022-01-30T17:05:22Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added the Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). label Feb 11, 2019

cnasc mentioned this issue Feb 11, 2019

Update next in group default to the latest version 🚀 unlock-protocol/unlock#1496

Closed

elmasse mentioned this issue Feb 11, 2019

nextein dev error with next 8.0.0 elmasse/nextein#221

Closed

lucleray mentioned this issue Feb 12, 2019

Replace branch approach by monorepo arunoda/learnnextjs-demo#55

Closed

5 tasks

ijjk closed this as completed in #7301 May 16, 2019

timneutkens mentioned this issue May 17, 2019

Revert ncc webpack #7370

Merged

timneutkens reopened this May 17, 2019

ijjk mentioned this issue May 29, 2019

Module parse failed: Unexpected token (36:6) You may need an appropriate loader to handle this file type. #7452

Closed

fionawhim mentioned this issue May 30, 2019

Tracking branch for Next.js’s upcoming TypeScript CityOfBoston/digital#458

Closed

mydearxym added a commit to coderplanets/coderplanets_web that referenced this issue Jun 15, 2019

fix(ci): see vercel/next.js#6240

c3018e8

cibulka mentioned this issue Jun 28, 2019

Build failing with ENOMEM error #7703

Closed

dav-is removed their assignment Jul 8, 2019

Timer added this to the 9.0.1 milestone Jul 8, 2019

Timer added a commit that referenced this issue Jul 8, 2019

Upgrade to webpack with latest acorns

bab12bb

Closes #6240

Timer mentioned this issue Jul 8, 2019

Upgrade to webpack with latest acorn #7795

Merged

Timer closed this as completed in #7795 Jul 8, 2019

Timer added a commit that referenced this issue Jul 8, 2019

Upgrade to webpack with latest acorns (#7795)

b013e11

Closes #6240

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

8.0.0 - dynamic import causing 'You may need an appropriate loader...' error #6240

8.0.0 - dynamic import causing 'You may need an appropriate loader...' error #6240

Comments

dunika commented Feb 11, 2019 • edited Loading

Bug report

Describe the bug

dimensi commented Feb 11, 2019 • edited Loading

AndrewIngram commented Feb 11, 2019

timneutkens commented Feb 11, 2019 • edited Loading

incleaf commented Feb 11, 2019

TomiTakussaari commented Feb 11, 2019 • edited Loading

cnasc commented Feb 11, 2019

iaincollins commented Feb 11, 2019

kpoelhekke commented Feb 11, 2019

jescalan commented Feb 11, 2019 • edited Loading

jescalan commented Feb 11, 2019

pdlug commented Feb 11, 2019

bitmap commented Feb 11, 2019

paulschneider commented Feb 12, 2019

icflorescu commented Feb 12, 2019

shaunchurch commented Feb 12, 2019 • edited Loading

schabluk commented Feb 12, 2019 • edited Loading

timneutkens commented Feb 12, 2019

timneutkens commented Feb 12, 2019

icflorescu commented Feb 13, 2019 • edited Loading

BiscuiTech commented Feb 13, 2019

goshdarnheck commented Feb 13, 2019

obedparla commented Feb 14, 2019

timneutkens commented Feb 14, 2019

ograycode commented Feb 14, 2019 • edited Loading

Robbatron commented Feb 14, 2019

vasco3 commented Feb 15, 2019 • edited Loading

alexbaumgertner commented May 17, 2019

vscode1111 commented May 22, 2019

ghost commented May 29, 2019

naomiHauret commented Jun 14, 2019

dixitpeeyush commented Jul 2, 2019

TidyIQ commented Jul 5, 2019

Timer commented Jul 5, 2019

c0b41 commented Jul 8, 2019

cryptiklemur commented Jul 13, 2019

zargold commented Jul 15, 2019

Timer commented Jul 15, 2019 • edited Loading

neocybereth commented Aug 23, 2019

timneutkens commented Aug 23, 2019

nicktaras commented Jan 7, 2020

balazsorban44 commented Jan 30, 2022

dunika commented Feb 11, 2019 •

edited

Loading

dimensi commented Feb 11, 2019 •

edited

Loading

timneutkens commented Feb 11, 2019 •

edited

Loading

TomiTakussaari commented Feb 11, 2019 •

edited

Loading

jescalan commented Feb 11, 2019 •

edited

Loading

shaunchurch commented Feb 12, 2019 •

edited

Loading

schabluk commented Feb 12, 2019 •

edited

Loading

icflorescu commented Feb 13, 2019 •

edited

Loading

ograycode commented Feb 14, 2019 •

edited

Loading

vasco3 commented Feb 15, 2019 •

edited

Loading

Timer commented Jul 15, 2019 •

edited

Loading