Cannot resolve babel module when using react-scripts@next

[nloding]

Is this a bug report?

Yes, for react-scripts 2.0. (edit: originally I had believed this to be related to workspaces, but after more testing, it is not - this happens without a monorepo/workspaces. All details below updated to reflect that with a simpler test case.)

Did you try recovering your dependencies?

Yes. I deleted both the workspace and CRA app node_modules and lock files, and reinstalled with yarn (v1.6.0); deleted everything again and tried with npm (v5.6.0) with the same result.

Which terms did you search for in User Guide?

I followed the steps outlined in the roadmap for react-scripts 2.0 to initialize the app.

Environment

MacOS High Sierra 10.134
node 10.1.0
yarn 1.6.0
create-react-app@next
[email protected]

I executed this command to init a new CRA2 app:
npx create-react-app@next --scripts-version=2.0.0-next.66cc7a90 test

Steps to Reproduce

1. Create a CRA2 app with the command above in the packages (or, in my example, "exercises" folder)
2. In the App.js file, attempt to import getPrototypeOf from @babel/runtime/helpers/getPrototypeOf
3. Run yarn start in either the CRA2 app or the workspace root

(Note: I discovered this issue originally when I installed semantic-ui-react and attempted to use one of its components, which resulted in this error. To simplify the demo I just attempted to import getPrototypeOf in App.js.)

Expected Behavior

CRA app compiles and runs

Actual Behavior

A compilation error occurs:
Module not found: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/Users/nloding/code/oss/cra2-workspace-broken-ref/src'

I also see this warning when installing the dependencies, I am unsure if it is related?
npm WARN @babel/[email protected] requires a peer of @babel/[email protected] but none is installed. You must install peer dependencies yourself.

Reproducible Demo

https://github.com/nloding/cra2-workspace-broken-ref

The broken line: https://github.com/nloding/cra2-workspace-broken-ref/blob/master/src/App.js#L6

[nloding]

It looks like [email protected] references @babel/[email protected] which is, in fact, missing getPrototypeOf. However, even if you manually install @babel/[email protected], which does have the missing export, the compilation still fails. I've updated my repo to reference beta.47.

❯ cat node_modules/@babel/runtime/helpers/getPrototypeOf.js | head -n 1
var _Object$getPrototypeOf = require("../core-js/object/get-prototype-of");

❯ cat node_modules/@babel/runtime/package.json | grep version
  "version": "7.0.0-beta.47",

❯ npm start
...
./src/App.js
Module not found: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/Users/nloding/code/oss/cra2-workspace-broken-ref/src'

[bugzpodder]

When the new alpha of CRA releases with babel 7b46+ you should be fine. Internally react-scripts webpack resolves babel runtime relative to itself.

https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/webpack.config.dev.js#L152

[nloding]

Got it, thanks - I'll keep an eye out for the next alpha announcement and test it out.

[Ethorsen]

This is starting to be a real problem as more and more packages rely on getPrototypeOf. We need to hold back a lot of upgrades because of the outdated version of babel in react-scripts@next

[bugzpodder]

I've personally had a similar issue as well. The good news is babel 7 is almost out (rc4) and I am sure there will be a new version of 2.0.0@next with it once it has been released.

[venikx]

@Ethorsen Same here.
I need Jest 22, but I can't update CRA to @next, because some deps rely on getPrototypeOf and breaks my app.

@bugzpodder How do you suggest installing and updating the next version of CRA? npm i ?

[nloding]

@Ethorsen @bugzpodder @AnaRobynn the latest cut of react-scripts ([email protected]) uses 7.0.0-beta.46 which has getPrototypeOf. You can use that version of react-scripts in the mean time, it works. There are upgrade directions in the roadmap issue #3815

[venikx]

I will try that one out when I get the chance, thank you! I might have fucked up some step, due to beinf the end of the day and lack of sleep.

Tomorrow is another day!

[venikx]

@nloding
I don't get the error message about getPrototypeOf anymore, which might be a step forward. But I'm getting building errors, the same as in the roadmap. So it might I'm still getting the same error, but it's just not showing it.

Known Issues in 2.x Alphas
Build errors sometimes do not show any detail:

An interesting note maybe is that it happens when creating the production build. I'm going to just try running it locally.

Not sure if it's going to be useful:

Error: Module build failed: Thread Loader (Worker 3)
We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

    at NodePath.insertBefore (/home/ana/git/beige/node_modules/@babel/traverse/lib/path/modification.js:55:11)
    at PluginPass.Class (/home/ana/git/beige/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:266:14)
    at newFn (/home/ana/git/beige/node_modules/@babel/traverse/lib/visitors.js:243:21)
    at NodePath._call (/home/ana/git/beige/node_modules/@babel/traverse/lib/path/context.js:65:18)
    at NodePath.call (/home/ana/git/beige/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/ana/git/beige/node_modules/@babel/traverse/lib/path/context.js:100:12)
    at TraversalContext.visitQueue (/home/ana/git/beige/node_modules/@babel/traverse/lib/context.js:144:16)
    at TraversalContext.visitSingle (/home/ana/git/beige/node_modules/@babel/traverse/lib/context.js:104:19)
    at TraversalContext.visit (/home/ana/git/beige/node_modules/@babel/traverse/lib/context.js:185:19)
    at Function.traverse.node (/home/ana/git/beige/node_modules/@babel/traverse/lib/index.js:106:17) main.chunk.js:373:7
./src/containers/App/index.js index.js:1
d/console[e]
index.js:1
handleErrors
webpackHotDevClient.js:178
./node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js/connection.onmessage
webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js/EventTarget.prototype.dispatchEvent
eventtarget.js:51
./node_modules/sockjs-client/lib/main.js/</SockJS.prototype._transportMessage/<
main.js:278
./node_modules/sockjs-client/lib/main.js/</SockJS.prototype._transportMessage
main.js:276
./node_modules/sockjs-client/lib/event/emitter.js/EventEmitter.prototype.emit
emitter.js:50
WebSocketTransport/this.ws.onmessage
websocket.js:35

[nloding]

I haven't run into that error yet, but I also haven't done a full production build in a while. Doing a rather large feature still ... hopefully it's fixed by the time I'm doing a production build! :)

[venikx]

Currently I'm running an ejected version on my local machine with an updated Jest version and when I push to the repo I make sure the tests don't run, because they will fail with version the repo has. It's a bit of a mess, but at least I can keep writing my tests now.