Create-react-app: dynamic import are unrecognized in 3.0.0-next.b0cbf2ca, compile fails

[joglr]

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

Reproducible Demo

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

[ianschmitz]

If you have a chance do you mind trying Node 10.x? We've had some reports of issues on the latest Node 11.x.

I just tested using Node 10.15.1 with the following in my index.js and it worked fine:

const LazyApp = React.lazy(() => import('./App'));

ReactDOM.render(
  <React.Suspense fallback={<div />}>
    <LazyApp />
  </React.Suspense>,
  document.getElementById('root')
);

[ianschmitz]

With regards to envinfo throwing, can you make sure create-react-app isn't installed globally? You can follow the instructions in our docs

[joglr]

@ianschmitz

With regards to envinfo throwing, can you make sure create-react-app isn't installed globally? You can follow the instructions in our docs

Ah, thank you. I was wondering why it wasn't working.

[wasker]

This bug looks like this bug on webpack, which was root-caused to this bug on npm.

[iansu]

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.

[iansu]

Is anyone able to reproduce this issue with the latest alpha release?

[cedmax]

@iansu I have the same problem with the v3.0.0 (npm v6.9, node v10.15.1)

./src/index.js 11:9
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
| var App = lazy(function () {
>   return import('./local');
| });

[joglr]

@ianschmitz
@iansu
I've tried downgrading to node 10.15.3, removing node_modules and package-lock.json and tested the recently released 3.0.0 version.
Can still reproduce.

Envinfo:

• node v10.15.3
• npm v6.4.1
• react-scripts v3.0.0
• OS: Windows 10 Build 1803

./src/index.js 21:9
Module parse failed: Unexpected token (21:9)
You may need an appropriate loader to handle this file type.
| });
| var AsyncApp = lazy(function () {
>   return import('./App');
| });
| ReactDOM.render(React.createElement(MuiThemeProvider, {

Btw, I still get an error with npx create-react-app --info:

Error: EEXIST: file already exists, mkdir 'C:\Users\Jonas'
TypeError: Cannot read property 'get' of undefined
    at errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js:78:20
    at cb (C:\Program Files\nodejs\node_modules\npm\lib\npm.js:228:22)
    at C:\Program Files\nodejs\node_modules\npm\lib\npm.js:266:24
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:83:7
    at Array.forEach (<anonymous>)
    at C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:82:13
    at f (C:\Program Files\nodejs\node_modules\npm\node_modules\once\once.js:25:25)
    at afterExtras (C:\Program Files\nodejs\node_modules\npm\lib\config\core.js:173:20)
    at C:\Program Files\nodejs\node_modules\npm\node_modules\mkdirp\index.js:47:53
C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205
  if (npm.config.get('json')) {
                 ^

TypeError: Cannot read property 'get' of undefined
    at process.errorHandler (C:\Program Files\nodejs\node_modules\npm\lib\utils\error-handler.js:205:18)
    at process.emit (events.js:189:13)
    at process._fatalException (internal/bootstrap/node.js:496:27)
Install for create-react-app@latest failed with code
7

I get this error everytime I try to use npx with either react-scripts or create-react-app. I don't get this error with react-scripts@2
I suspect it has something to do with my user folder containing a space: C:\Users\Jonas Røssum and somehow gets interpreted wrongly.

[iansu]

There is an npm/npx bug with usernames that contain a space. I'm not sure if that's related to the dynamic import issue. Maybe try copying your code to a different directory, outside of your user's account, that doesn't have any spaces in the name. Even if that's not a good long term solution it might help us troubleshoot this.

npx also uses npm's cache which is probably why you're seeing an error with --info. I would try clearing the cache or at least removing create-react-app from the cache and then run that command again.

[joglr]

@iansu Thanks for the clarification.

[cedmax]

I'm not sure if that's related to the dynamic import issue

I don't think so: I have no spaces in my folder names (also I'm on MacOS, so it's not platform specific either)

[Silic0nS0ldier]

Hit this issue in 3.0.0 when trying to upgrade an internal project under node 8.11 (specifically the docker container node:8.11.0-alpine).

I'll get a repo together that reproduces it, and see if this applies to imports with the file extension specified while I'm at it.

[Silic0nS0ldier]

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.

[bugzpodder]

seems something going on package-lock.json. removing it and reinstalling via npm install fixes the problem. also a fresh install of yarn helps.

[Silic0nS0ldier]

@bugzpodder Indeed. Regenerating the lock file corrects my issue reproduction repo as well (the need for eslint to be installed at the top level hinted at this somewhat). Reports that regenerating the lock file isn't working implies that this isn't the cause, however its plausible that the regeneration isn't producing a valid dependency graph (as far as the code is concerned).

Might be a bad mapping between dependencies and packages (packages depending on dependencies they don't explicitly declare) resulting in them on occasion not seeing what they expect.

[delaaxe]

Having the same issue on windows, node 10 and without paths containing spaces. Is there a workaround for this?

[bugzpodder]

Would removing yarn.lock/package-lock.json and node_modules work @delaaxe

[kuzman]

I have the same issue on MacOs, node 10, npm 6.4.1
I have tried the suggested workaround (removing package-lock.json), doesn't help. Also our CI/CD pipeline is recreating form scratch everything and it fails over there too....

[delaaxe]

@bugzpodder Tried that a few times with npm. Will try again with yarn

[Silic0nS0ldier]

@kuzman Is this with a clean project as well (as in newly created using the CLI tool)? If not, could you put a list of your dependencies up? I'd like to see if I can get that scenario accounted for in my reproduction repo (https://github.com/Silic0nS0ldier/CRA-6673).

[joglr]

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)

[delaaxe]

Switched to yarn and worked as expected

[bradfmd]

@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

[Silic0nS0ldier]

Proposed workaround works for my reproduction repo as well.

Looking in package-lock.json I can only see 1 other version of acorn-dynamic-import (v4) which is required by webpack. Tracking down something that uses acorn-dynamic-import but doesn't itself depend on it sounds like the next step towards getting this properly fixed.

[Silic0nS0ldier]

Doesn't look like anything else is depending on acorn-dynamic-import aside from webpack. By default, both packages are living at the top level in node_modules (no duplicate copies). Odd that adding the older version of acorn-dynamic-import fixes this issue at all since webpack shouldn't even be touching the top level one when its own node_modules folder has what it wants. That is, unless something has added a require hook and changed dependency resolution logic in the process.

Perhaps related, perhaps not. I've been digging into webpack to try and track down where it all falls apart and I've noticed some errors in generated code. The first in html-webpack-plugin due to a strict mode violation (with keyword is used), and our failing source (unexpected token and 'import' and 'export' may appear only with 'sourceType: module'). That last error could be a lead.

[nitinkaveriappa]

Was facing the same issue. Adding npm i --save-dev acorn-dynamic-import@3 fixed the issue.

[ViktorAksionov]

I had the same issue and fixed it installing acorn@6.

jest is using acorn@5 and looks like somehow it creates a problem. Also you can dedupe acorn.

[AndrePinto-NET]

Thank you @joglr

[Dante-dan]

Thank you @nitinkaveriappa

[oznekenzo]

Thank you @joglr!

[gonzofish]

Has anyone tried installing acorn-dynamic-import@4? I _think_ it's working for me...but after trying so much, I'm always wary to say "it works!"

[quintmouthaan]

@joglr thank you very much, it worked for me
@gonzofish interestingly enough, installing acorn-dynamic-import@4 did not work for me, I had to install v3