create-react-app: dynamic import are unrecognized in 3.0.0-next.b0cbf2ca, compile fails
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:)
- Create a new project with the latest prerelease (3.0.0-next.b0cbf2ca)
- Import a module dynamically (eg. const AsyncApp = lazy(() => import(‘./App’)))
- 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
Reproducible Demo
(Paste the link to an example project and exact instructions to reproduce the issue.)
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 5
- Comments: 32 (5 by maintainers)
Commits related to this issue
- facebook/create-react-app#6673 Issue demo — committed to Silic0nS0ldier/CRA-6673 by deleted user 5 years ago
- fix build remove/add yarn.lock per https://github.com/facebook/create-react-app/issues/6673 — committed to gymnasium/gym-front-end by deleted user 5 years ago
- Fix for Issue with Lazy Import Seems to resolve an issue related to using `lazy` on newer versions of Node. Related issue can be found [here](https://github.com/facebook/create-react-app/issues/6673#... — committed to projectunic0rn/travel-map-ui by timimsms 4 years ago
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:npm install
Does updating the
acorn-dynamic-import
dependency solve the issue for anyone else? (for people, where the steps mentioned didn’t solve the issue)Thank you @joglr
Was facing the same issue. Adding
npm i --save-dev acorn-dynamic-import@3
fixed the issue.It’s unclear if webpack is going to do anything to fix this issue or if it’s just going to be fixed in npm. We’ll keep an eye on the webpack issue and see if they release a new version before we publish 3.0 final.
This bug looks like this bug on webpack, which was root-caused to this bug on npm.
Thank you @joglr!
Proposed workaround works for my reproduction repo as well.
Looking in
package-lock.json
I can only see 1 other version ofacorn-dynamic-import
(v4) which is required by webpack. Tracking down something that usesacorn-dynamic-import
but doesn’t itself depend on it sounds like the next step towards getting this properly fixed.@joglr I have this problem and none of the previous suggestions worked for me. I tried your recommendation and can confirm it solves the issue for me
seems something going on package-lock.json. removing it and reinstalling via npm install fixes the problem. also a fresh install of yarn helps.
Repo to reproduce issue https://github.com/Silic0nS0ldier/CRA-6673 Presence of file name makes no difference. I got this running on another device as well to rule out the creation of a bad state. Tried to make sample as simple as possible to constrain area of investigation as much as possible.