Create-react-app: Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray

[pehhuishi]

Error Message on the terminal: Cannot find module '/Users/pehhuishi/code/react/practice/react-practice/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray

Not sure why after I installed bootstrap 3 "npm install [email protected] ­­save" I hit the error above. Hope someone can help to resolve. I need to use bootstrap 3 on react.

Thanks for helping !

[Pajn]

Please post the full error message so that the problematic module can be identified.
Bootstrap does not have a dpendency on @babel/runtime so if they do require that one, it's a bug there. However this is only a guess without the full error message.

[pehhuishi]

Hi @Pajn ,

Here is the full error message from the browser:

formatWebpackMessages.js:9 Uncaught Error: Cannot find module '/Users/pehhuishi/code/react/practice/react-practice/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray'
at webpackMissingModule (formatWebpackMessages.js:9)
at Object../node_modules/react-dev-utils/formatWebpackMessages.js (formatWebpackMessages.js:9)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object../node_modules/react-dev-utils/webpackHotDevClient.js (webpackHotDevClient.js:23)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.0 (serviceWorker.js:135)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)

[errk01]

Try: npm add @babel/runtime

[GomatoX]

@errk01 Sadly but with yarn workspaces it's not working.

[bugzpodder]

@GomatoX try:
"nohoist": [ "**/babel-preset-react-app/@babel/runtime" ]
in your workspace package.json

remove all node_modules and re-run yarn install

[rafaelim]

I'm have likely the same issue but with the objectSpread2, i don't what is causing this, but some how the babel-preset-react-app is requiring the @babel/[email protected]

[anhquande]

I have the same problem, but with objectSpread2
I tried the solution suggested by @bugzpodder and @errk01, but it does not work either.

My workaround is to force babel-preset-react-app to use newer version 7.5.0 instead of 7.4.3.
Add the following configuration in your package.json

  "resolutions": {
    "**/@babel/runtime": "7.5.0"
  },

It may be related to https://github.com/babel/babel/issues/10169

[mingenesis]

Thank you @anhquande. It's work for me.

[GomatoX]

@bugzpodder Thanks, it seems working.

For yarn workspaces I just have to add module in global scope: yarn add -W @babel/runtime
And then use your solution with "nohoist"

"nohoist": [
    "**/babel-preset-react-app/@babel/runtime"
]

[VasiliKubarka]

try:
yarn add @babel/runtime
and in .babelrc

 "presets": [
    ["react-app", { "absoluteRuntime": false }],
  ]

it solves both incorrect module import and absolute path

[rafaelim]

For me the latest version from babel fixed. I just remove the yarn.lock and run yarn install

[fikar46]

Try: npm add @babel/runtime

thank you so much

[tonysepia]

This was sufficient for me,thank you!
npm add @babel/runtime

[charleslukes]

This happened to me right now, comes as a result of me composing my state files into containers.
Even when I tried refactoring my files back to default it still brought that error.

use: npm add @babel/runtime and restart the app.

[shaneiadt]

npm i @babel/runtime

Solved it for me, thanks @fikar46 👍

[saeedhassankhan]

npm i @babel/runtime

Solved it for me, thanks @fikar46 👍

thanks it workes for me

[carlosdiver]

The same problem happened to me.
I run npm add @babel/runtime, removed yarn.lock, run yarn install and restart the project.
Solved!!

Thanks all

[gferrarocamus]

None of the above worked for me. I had to remove both package-lock.json AND node_modules and install again:
$ rm -rf package-lock.json node_modules
$ npm install

Solved!

[JaccoGoris]

I've tried all steps here without any luck, whenever I delete everything and start over (on 3.1.0 or 3.1.1) I end up with the following message:

Cannot find module 'repo-path-here/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'setupTests.js'.

because those files are hoisted to the main @babel folder.
I can run the code but all the tests break

[mamunur121]

npm i @babel/runtime
It solved my problem and running properly.

[JulienPradet]

In my case, I had an issue with my babel-loader cache.

By default it's in node_modules/.cache/babel-loader. But it may be overidden by your webpack configuration under the option cacheDirectory of your babel-loader rule.

Make sure to delete it before running your scripts and it might solve your issues.

[shauryakapoor]

Try: npm add @babel/runtime

I can not thank you enough. I appreciate your time and effort for helping us out @errk01 .

Quick Question: How did you know that this command would fix our error? I am trying to comprehend how you were able to acquire the knowledge base where you knew that this exact command would fix our error.

[patrykkowalski0617]

hi,

I had this message: "Cannot find module (..) babel-preset-react-app \ node_modules \ @babel \ runtime / helpers / slicedToArray"

The funny thing is that I trun of computer with working, commited project yesturday, and today i see this bug message in my console. Another funny thing, it was beggining of my porject, so when I couldn't find solution I started new one and just after changing some text on default react app page, bug couse again. I tryed new projects and it is always the same, witch maked my furious.

Finaly I deleted node_modules folder and taped npm i - working now...

[MatBasiak]

get the same error after

npm install --save styled-components

npm add @babel/runtime

fix the problem

[yagoazedias]

@VasiliKubarka tip woked to me, but is removing the absolute imports of my react components

[mahesha-cuelogic]

I deleted node_modules folder and did npm i. its working now 😂

[akinorimiz]

I could fix this issue with yarn test --clearCache.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[devilMing]

           presets: [
              [
                require.resolve('babel-preset-react-app/dependencies'),
                { helpers: false },
              ],
            ],

[pnguy55]

Try: npm add @babel/runtime

works here

[hugoh59]

None of the above worked for me...

[PatienceD]

I've tried everything everyone above has suggested, and none of it has worked for me. I still get the initial error:
"Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\patie\OneDrive\Documents\GitHub\School-Info\myapp\node _modules\webpack\buildin\global.js: Cannot find module './src/data'"

this is on a brand new react app, I haven't even added anything into it.

[keponk]

+1
Been searching around for a bit now clearing cache and following the simplest rules and still get the same error on a clean create-react-app

```
Html Webpack Plugin:

Error: Child compilation failed:
Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
Error: [BABEL] /path_to_project/node_modules/webpack/buildin/global.js: Cannot find module './src/data'
Require stack:

• /path_to_project/node_modules/core-js-compat/helpers.js
• /path_to_project/node_modules/core-js-compat/get-modules-list-for-target-version.js
• /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/polyfills/corejs3/entry-plugin.js
• /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
• /path_to_project/node_modules/babel-preset-react-app/dependencies.js
• /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
• /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
• /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
• /path_to_project/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
• /path_to_project/node_modules/loader-runner/lib/loadLoader.js
• /path_to_project/node_modules/loader-runner/lib/LoaderRunner.js
• /path_to_project/node_modules/webpack/lib/NormalModule.js
• /path_to_project/node_modules/webpack/lib/NormalModuleFactory.js
• /path_to_project/node_modules/webpack/lib/Compiler.js
• /path_to_project/node_modules/webpack/lib/webpack.js
• /path_to_project/node_modules/react-scripts/scripts/start.js (While processing: "/path_to_project/node_modules/babel-preset-react-app/dependencies.js$0$9")

• loader.js:780 Function.Module._resolveFilename
  internal/modules/cjs/loader.js:780:15

• loader.js:685 Function.Module._load
  internal/modules/cjs/loader.js:685:27

• loader.js:838 Module.require
  internal/modules/cjs/loader.js:838:19

• helpers.js:74 require
  internal/modules/cjs/helpers.js:74:18

• helpers.js:3 Object.
  [test_webcam]/[core-js-compat]/helpers.js:3:14

• loader.js:945 Module._compile
  internal/modules/cjs/loader.js:945:30

• loader.js:962 Object.Module._extensions..js
  internal/modules/cjs/loader.js:962:10

• loader.js:798 Module.load
  internal/modules/cjs/loader.js:798:32

• loader.js:711 Function.Module._load
  internal/modules/cjs/loader.js:711:12

• loader.js:838 Module.require
  internal/modules/cjs/loader.js:838:19

• helpers.js:74 require
  internal/modules/cjs/helpers.js:74:18

• get-modules-list-for-target-version.js:2 Object.
  [test_webcam]/[core-js-compat]/get-modules-list-for-target-version.js:2:51

• loader.js:945 Module._compile
  internal/modules/cjs/loader.js:945:30

• loader.js:962 Object.Module._extensions..js
  internal/modules/cjs/loader.js:962:10

• loader.js:798 Module.load
  internal/modules/cjs/loader.js:798:32

• Error: [BABEL] /path_to_project/node_modules/webpack/buildin/global.js: Cannot find module './src/data'

• Require stack:

• • /path_to_project/node_modules/core-js-compat/helpers.js
• • /path_to_project/node_modules/core-js-compat/get-modules-list-for-target-version.js
• • /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/polyfills/corejs3/entry-plugin.js
• • /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
• • /path_to_project/node_modules/babel-preset-react-app/dependencies.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
• • /path_to_project/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
• • /path_to_project/node_modules/loader-runner/lib/loadLoader.js
• • /path_to_project/node_modules/loader-runner/lib/LoaderRunner.js
• • /path_to_project/node_modules/webpack/lib/NormalModule.js
• • /path_to_project/node_modules/webpack/lib/NormalModuleFactory.js
• • /path_to_project/node_modules/webpack/lib/Compiler.js
• • /path_to_project/node_modules/webpack/lib/webpack.js
• • /path_to_project/node_modules/react-scripts/scripts/start.js (While processing: "/path_to_project/node_modules/babel-preset-react-app/dependencies.js$0$9")

• Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):

• Error: [BABEL] /path_to_project/node_modules/webpack/buildin/module.js: Cannot find module './src/data'

• Require stack:

• • /path_to_project/node_modules/core-js-compat/helpers.js
• • /path_to_project/node_modules/core-js-compat/get-modules-list-for-target-version.js
• • /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/polyfills/corejs3/entry-plugin.js
• • /path_to_project/node_modules/babel-preset-react-app/node_modules/@babel/preset-env/lib/index.js
• • /path_to_project/node_modules/babel-preset-react-app/dependencies.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
• • /path_to_project/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
• • /path_to_project/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
• • /path_to_project/node_modules/loader-runner/lib/loadLoader.js
• • /path_to_project/node_modules/loader-runner/lib/LoaderRunner.js
• • /path_to_project/node_modules/webpack/lib/NormalModule.js
• • /path_to_project/node_modules/webpack/lib/NormalModuleFactory.js
• • /path_to_project/node_modules/webpack/lib/Compiler.js
    ```

[endel]

Also having the same issue right now, maybe some internal dependency had a breaking change we don't know about?

[benshanahan1]

+1 Seems like this is happening to a bunch of people right now.

[Timer]

For all users experiencing this _right now_, please do not respond to this thread.

Follow these issues:
https://github.com/facebook/create-react-app/issues/8062
https://github.com/npm/cli/issues/545

Edit: temporarily locking to prevent 33+ people from getting pinged for messages until the current issue self-resolves.

[rbrewington]

If anyone else has been googling for hours and finds this thread but doesn't want to install @babel/runtime as a direct dependency or change their yarn config, you can migrate your project to CRAv3.3.0 using the instructions here (also quoted below) and the error should go away.

Inside any created project that has not been ejected, run:

npm install --save --save-exact [email protected]

or

yarn add --exact [email protected]

[MrBhati]

yarn add @babel/runtime
work for me
thanxx

[MeMihir]

I was facing similar error but with objectSpread2
npm add @babel/runtime
worked for me
thanks 👍

[thebiltheory]

None of the above works.
Anyone knows what would be the potential causes?

UPDATE:
Running the following worked out.

react-scripts test --clearCache

Run tests again

react-scripts test

[timhitchins]

I also came across the same issue running a container with objectSpread2 error.
npm i @babel/runtime worked for me as well. Still wondering what caused the issue in the first place. Thanks!

[VituBR19]

Try: npm add @babel/runtime

It works for me, thanks @errk01

[defusioner]

Installing babel runtime in CRA environment... Use @thebiltheory suggestion

[sbcreates]

I could fix this issue with yarn test --clearCache.

This solution worked for me! Thanks @akinorimiz

I'm using yarn workspaces in a monorepo. Adding a new dep to one of my packages caused the error others were having running tests. I tried adding @babel/runtime, removing all node_modules, running yarn install again with no luck.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.