question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

dynamic import are unrecognized in 3.0.0-next.b0cbf2ca, compile fails

See original GitHub issue

Is this a bug report?

Yes

Did you try recovering your dependencies?

npm version 6.8.0

Which terms did you search for in User Guide?

Environment

I used the command, but I got an error instead. (node:16088) UnhandledPromiseRejectionWarning: Error: The system cannot find the path specified.

at Function.e.exports.sync (C:\Users\jonas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:7778)
at Object.copySync (C:\Users\jonas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:104976)
at Object.t.writeSync.e [as writeSync] (C:\Users\jonas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:123499)
at C:\Users\jonas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124274    at Promise.all.then.e (C:\Users\jonas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124289)

(node:16088) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwinginside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:16088) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I’m on Windows 10

  • node v11.8.0
  • npm v6.8.0
  • react-scripts v3.0.0-next.b0cbf2ca
  • react & react-dom v16.8.1

Steps to Reproduce

(Write your steps here:)

  1. Create a new project with the latest prerelease (3.0.0-next.b0cbf2ca)
  2. Import a module dynamically (eg. const AsyncApp = lazy(() => import(‘./App’)))
  3. npm start -> Failed to compile

Expected Behavior

(Write what you thought would happen.) The build would pass, as it does in previous versions.

Actual Behavior

image

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:5
  • Comments:32 (5 by maintainers)

github_iconTop GitHub Comments

33reactions
joglrcommented, May 15, 2019

I finally found a solution that works for me, suggested by @andybarsby and @kylehalleman

https://github.com/facebook/create-react-app/issues/6873#issuecomment-486205976

Running npm i --save-dev acorn-dynamic-import@3 fixes the issue for me. No other solution have worked, I’ve tried all of these:

  • Downgrading node version, as suggested by @ianschmitz
  • Removing package-lock.json and node_modules folder and running npm install
  • Tested different computers (issue still occurs)

Does updating the acorn-dynamic-import dependency solve the issue for anyone else? (for people, where the steps mentioned didn’t solve the issue)

2reactions
AndrePinto-NETcommented, Jul 5, 2019

Thank you @joglr

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting compile error in dynamic import from shared in next app
I am using yarn workspace to setup multiapp SPA, In that I have one folder which will share common components like header, footer...
Read more >
Advanced Features: Dynamic Import - Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
Read more >
Features | Vite
Vite will detect such bare module imports in all served source files and perform ... via dynamic import and will be split into...
Read more >
Dynamic import() - V8 JavaScript engine
We're using the same extension here for consistency across platforms and to clearly make the distinction between modules and regular scripts.
Read more >
Code Splitting - webpack
Dynamic Imports : Split code via inline function calls within modules. ... [webpack-cli] Compilation finished asset index.bundle.js 553 KiB [emitted] (name: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found