BABEL error when running `yarn` in create-react-app #4154

sowhatdoido · 2018-03-14T17:45:48Z

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

yarn --version 1.5.1

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

node -v: v8.9.4
npm -v: 5.6.0
yarn --version (if you use Yarn): 1.5.1
npm ls react-scripts (if you haven’t ejected):
└── [email protected] -> /Users/fratran/projects/create-react-app/packages/react-scripts extraneous

npm ERR! extraneous: [email protected] /Users/fratran/projects/create-react-app/node_modules/react-scripts

Then, specify:

Operating system: OSX Sierra 10.12.6
Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

Clone CRA into a new folder (git clone https://github.com/facebook/create-react-app.git)
Go to the created directory (cd create-react-app)
Run Yarn (yarn)

Expected Behavior

node_modules folder gets generated, dependencies download without error, compiling iframeScripts.js finishes without error.

Actual Behavior

Failed to compile message occurs when compiling iframeScript.js followed by the following error

Compiling iframeScript.js
Failed to compile.

ERROR in ./src/iframeScript.js
Module build failed: TypeError: [BABEL] /Users/fratran/projects/create-react-app/packages/react-error-overlay/src/iframeScript.js: Cannot read property 'slice' of undefined (While processing: "/Users/fratran/projects/create-react-app/node_modules/babel-preset-react-app/index.js$3")
    at throwVersionError (/Users/fratran/projects/create-react-app/node_modules/@babel/helper-plugin-utils/lib/index.js:41:15)
    at Object.assertVersion (/Users/fratran/projects/create-react-app/node_modules/@babel/helper-plugin-utils/lib/index.js:11:11)
    at /Users/fratran/projects/create-react-app/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js:15:7
    at /Users/fratran/projects/create-react-app/node_modules/@babel/helper-plugin-utils/lib/index.js:16:12
    at /Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:167:14
    at cachedFunction (/Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/caching.js:40:17)
    at loadPluginDescriptor (/Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:202:28)
    at /Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:59:16
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:58:36)
    at recurseDescriptors (/Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:92:27)
    at loadConfig (/Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/config/index.js:108:6)
    at /Users/fratran/projects/create-react-app/node_modules/@babel/core/lib/transform.js:26:33
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
✨  Done in 4.52s.
✨  Done in 31.53s.

Reproducible Demo

You can reproduce this with this base repo, and I've experienced it on multiple coworker's computers.

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

sowhatdoido · 2018-03-15T05:52:53Z

Just a side note, this is in the default next branch. I tried to replicate this in master and it works fine. Here are the results I expected and got:

Compiling iframeScript.js
Hash: b64068c463e855f59d32
Time: 3697ms
           Asset    Size  Chunks             Chunk Names
iframe-bundle.js  214 kB       0  [emitted]  main

Compiling index.js
Hash: 2a6020c2fd31665a904f
Time: 729ms
   Asset    Size  Chunks                    Chunk Names
index.js  415 kB       0  [emitted]  [big]  main

Compiled successfully!


Done in 6.49s.
Done in 342.70s.

The thing that is really strange though is I had this working in the next branch last night... didn't turn off my computer or update anything... just deleted the test-app, tried to rerun yarn create-react-app test-app to test some changes for react-scripts when I first ran into the issue. Since then, I can replicate the issue on every machine I've tried by following the steps described above.

lots0logs · 2018-03-15T06:39:49Z

Updating all babel packages to beta.41 fixed the issue for me.

sowhatdoido · 2018-03-15T07:02:34Z

Interesting... I'll give that a try. Are you concerned about the breaking change released in beta.41 though?

https://github.com/babel/babel/releases

sowhatdoido · 2018-03-15T07:11:30Z

I've confirmed that updating all the babel packages to 7.0.0-beta.41 works, but the question is why did 7.0.0-beta.38 suddenly stop working overnight? 🤔

I'm probably going to fix this in my app with 7.0.0-beta.40 since I'm not sure if 41's breaking changes will affect any other the other systems.

Either way, I'd consider this issue solved unless anybody else wanted to chime in with additional details.

rista404 · 2018-03-15T11:27:49Z

I can confirm this issue is occurring in [email protected].

Failed to compile.

./src/index.js
Module build failed: TypeError: [BABEL] /path/to/monorepo/packages/app/src/index.js: Cannot read property 'slice' of undefined (While processing: "/path/to/monorepo/node_modules/babel-preset-react-app/index.js$3")
    at Array.map (<anonymous>)

Not sure how to update the babel packages though, it keeps adding them to my list of dependencies. I'm using yarn, workspaces, and lerna. Testing monorepo support in react-scripts@2.

So this might be an issue connected to #3815 .

kellyrmilligan · 2018-03-15T13:54:56Z

confirmed as well. in the next branch going into the sub packages and syncing the babel.beta dependencies cleared it up for me. someone should figure out why the breakage, but this frees it up to contribute some code as well.

existentialism · 2018-03-15T15:11:26Z

For some context, in beta.41 we added a way for plugins to check/assert what version of Babel they're being used with and throw a friendlier (irony, lol) error message.

Haven't dug into this really, but it looks like [email protected] (from another dep) is getting loaded by CRA's preset since it doesn't have an explicit devDep on it.

I'll push a PR to fix.

NMinhNguyen · 2018-03-16T00:08:26Z

I actually did a bit of digging and it's to do with svgr having caret version dependencies on @babel/*: https://github.com/smooth-code/svgr/blob/v1.8.1/package.json#L37-L41

$ yarn why @babel/core
yarn why v1.5.1
[1/4] 🤔  Why do we have the module "@babel/core"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@babel/[email protected]"
info Has been hoisted to "@babel/core"
info Reasons this module exists
   - Hoisted from "react-scripts#@babel#core"
   - Hoisted from "react-scripts#babel-preset-react-app#@babel#core"
info Disk size without dependencies: "740MB"
info Disk size with unique dependencies: "8.25GB"
info Disk size with transitive dependencies: "11.6GB"
info Number of shared dependencies: 64
=> Found "svgr#@babel/[email protected]"
info This module exists because "react-scripts#svgr" depends on it.
info Disk size without dependencies: "216MB"
info Disk size with unique dependencies: "7.77GB"
info Disk size with transitive dependencies: "11.12GB"
info Number of shared dependencies: 65

$ yarn why @babel/plugin-proposal-object-rest-spread
yarn why v1.5.1
[1/4] 🤔  Why do we have the module "@babel/plugin-proposal-object-rest-spread"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@babel/[email protected]"
info Has been hoisted to "@babel/plugin-proposal-object-rest-spread"
info Reasons this module exists
   - Hoisted from "react-scripts#svgr#@babel#plugin-proposal-object-rest-spread"
   - Hoisted from "react-scripts#svgr#@babel#preset-env#@babel#plugin-proposal-object-rest-spread"
info Disk size without dependencies: "808MB"
info Disk size with unique dependencies: "848MB"
info Disk size with transitive dependencies: "848MB"
info Number of shared dependencies: 2
=> Found "@babel/preset-env#@babel/[email protected]"
info This module exists because "react-scripts#babel-preset-react-app#@babel#preset-env" depends on it.
info Disk size without dependencies: "16MB"
info Disk size with unique dependencies: "32MB"
info Disk size with transitive dependencies: "32MB"
info Number of shared dependencies: 1

existentialism mentioned this issue Mar 15, 2018

Bump babel-related deps #4159

Merged

existentialism mentioned this issue Mar 16, 2018

BABEL error when running yarn in create-react-app #4166

Closed

This was referenced Mar 16, 2018

Roadmap for [email protected] #3815

Closed

Flow doesn't work with Lerna when importing packages into one another facebook/flow#5975

Open

iansu closed this as completed in #4159 Mar 18, 2018

lock bot locked and limited conversation to collaborators Jan 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BABEL error when running `yarn` in create-react-app #4154

BABEL error when running `yarn` in create-react-app #4154

sowhatdoido commented Mar 14, 2018

sowhatdoido commented Mar 15, 2018

lots0logs commented Mar 15, 2018

sowhatdoido commented Mar 15, 2018 •

edited

Loading

sowhatdoido commented Mar 15, 2018

rista404 commented Mar 15, 2018 •

edited

Loading

kellyrmilligan commented Mar 15, 2018

existentialism commented Mar 15, 2018 •

edited

Loading

NMinhNguyen commented Mar 16, 2018

BABEL error when running yarn in create-react-app #4154

BABEL error when running yarn in create-react-app #4154

Comments

sowhatdoido commented Mar 14, 2018

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

sowhatdoido commented Mar 15, 2018

lots0logs commented Mar 15, 2018

sowhatdoido commented Mar 15, 2018 • edited Loading

sowhatdoido commented Mar 15, 2018

rista404 commented Mar 15, 2018 • edited Loading

kellyrmilligan commented Mar 15, 2018

existentialism commented Mar 15, 2018 • edited Loading

NMinhNguyen commented Mar 16, 2018

BABEL error when running `yarn` in create-react-app #4154

BABEL error when running `yarn` in create-react-app #4154

sowhatdoido commented Mar 15, 2018 •

edited

Loading

rista404 commented Mar 15, 2018 •

edited

Loading

existentialism commented Mar 15, 2018 •

edited

Loading