Skip to content

Cannot resolve babel module when using react-scripts@next #4511

Closed
@nloding

Description

@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
react-scripts@2.0.0-next.66cc7a90

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/plugin-syntax-dynamic-import@7.0.0-beta.34 requires a peer of @babel/core@7.0.0-beta.34 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

Activity

changed the title [-]Cannot resolve babel module when using yarn workspaces and react-scripts@next[/-] [+]Cannot resolve babel module when using react-scripts@next[/+] on May 24, 2018
nloding

nloding commented on May 25, 2018

@nloding
Author

It looks like react-scripts@2.0.0-next.66cc7a90 references @babel/runtime@7.0.0-beta.44 which is, in fact, missing getPrototypeOf. However, even if you manually install @babel/runtime@7.0.0-beta.47, 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

bugzpodder commented on May 27, 2018

@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

nloding commented on May 28, 2018

@nloding
Author

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

added this to the 2.0.0 milestone on Jun 1, 2018
Ethorsen

Ethorsen commented on Aug 22, 2018

@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

bugzpodder commented on Aug 27, 2018

@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

venikx commented on Aug 28, 2018

@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

nloding commented on Aug 28, 2018

@nloding
Author

@Ethorsen @bugzpodder @AnaRobynn the latest cut of react-scripts (react-scripts@2.0.0-next.a671462c) 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

venikx commented on Aug 28, 2018

@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

venikx commented on Aug 29, 2018

@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

nloding commented on Aug 29, 2018

@nloding
Author

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

venikx commented on Aug 29, 2018

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

locked and limited conversation to collaborators on Jan 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @nloding@Timer@Ethorsen@bugzpodder@venikx

        Issue actions

          Cannot resolve babel module when using react-scripts@next · Issue #4511 · facebook/create-react-app