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

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')
);

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

@ianschmitz

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

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

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.

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

@iansu

@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');
| });

@ianschmitz

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

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.

@kuzman

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

@andybarsby

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

#6873 (comment)

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)

Switched to yarn and worked as expected

@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

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.

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.

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

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.

Thank you @joglr

@nitinkaveriappa

Thank you @nitinkaveriappa

Thank you @joglr!

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

fix build

@gonzofish

@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

Fix for Issue with Lazy Import

Navigation Menu

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

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Is this a bug report?

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

Activity

ianschmitz commented on Mar 18, 2019

ianschmitz commented on Mar 18, 2019

nimrossum commented on Mar 18, 2019

wasker commented on Mar 19, 2019

iansu commented on Mar 19, 2019

iansu commented on Apr 21, 2019

cedmax commented on Apr 23, 2019

nimrossum commented on Apr 23, 2019

iansu commented on Apr 23, 2019

11 remaining items

Silic0nS0ldier commented on May 9, 2019

nimrossum commented on May 15, 2019

delaaxe commented on May 15, 2019

bradfmd commented on May 15, 2019

Silic0nS0ldier commented on May 15, 2019

Silic0nS0ldier commented on May 16, 2019

nitinkaveriappa commented on May 23, 2019

ViktorAksionov commented on May 24, 2019

AndrePinto-NET commented on Jul 5, 2019

Dante-dan commented on Jul 11, 2019

oznekenzo commented on Jul 16, 2019

gonzofish commented on Jul 30, 2019

quintmouthaan commented on Nov 11, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions