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

[sowhatdoido]

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

1. node -v: v8.9.4
2. npm -v: 5.6.0
3. yarn --version (if you use Yarn): 1.5.1
4. npm ls react-scripts (if you haven’t ejected):
   └── react-scripts@1.1.0 -> /Users/fratran/projects/create-react-app/packages/react-scripts extraneous

npm ERR! extraneous: react-scripts@1.1.0 /Users/fratran/projects/create-react-app/node_modules/react-scripts

Then, specify:

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

Steps to Reproduce

(Write your steps here:)

1. Clone CRA into a new folder (git clone https://github.com/facebook/create-react-app.git)
2. Go to the created directory (cd create-react-app)
3. 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.

[sowhatdoido]

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]

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

[sowhatdoido]

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]

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]

I can confirm this issue is occurring in react-scripts@2.0.0-next.47d2d941.

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]

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]

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 proposal-object-rest-spread@beta.41 (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]

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/core@7.0.0-beta.38"
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/core@7.0.0-beta.42"
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/plugin-proposal-object-rest-spread@7.0.0-beta.42"
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/plugin-proposal-object-rest-spread@7.0.0-beta.38"
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