create-react-app: Module not found: react-refresh/runtime.js falls outside of the project src/

Describe the bug

Morning, i upgraded my project to react-scripts V5 and now the console is showing many logs about this

`ERROR in ./src/services/store/actions/index.js 1:40-119 Module not found: Error: You attempted to import …/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project’s node_modules/. @ ./src/services/store/reducers/index.js 14:0-40 27:9-19 @ ./src/services/store/index.js 8:0-34 38:28-36 @ ./src/index.js 13:0-40 22:9-17

ERROR in ./src/services/store/actions/sharedStore/index.js 1:40-119 Module not found: Error: You attempted to import …/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project’s node_modules/. @ ./src/services/store/reducers/sharedStore/index.js 4:0-86 11:9-26 16:9-31 @ ./src/services/store/reducers/index.js 13:0-47 65:21-39 @ ./src/services/store/index.js 8:0-34 38:28-36 @ ./src/index.js 13:0-40 22:9-17

ERROR in ./src/services/store/index.js 1:40-119 Module not found: Error: You attempted to import …/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project’s node_modules/. @ ./src/index.js 13:0-40 22:9-17 `

Did you try recovering your dependencies?

yes, i deleted node_modules and yarn.lock and nothing

Which terms did you search for in User Guide?

react-refresh runtime error

Environment

yarn version = 1.22.5 node version = 16.13.0 react version = 18.0.0-rc

Steps to reproduce

installed new version
yarn start (react-scripts start)
console full of errors

Expected behavior

the project should works like the previous version

Actual behavior

ERROR in ./src/services/store/actions/index.js 1:40-119 Module not found: Error: You attempted to import …/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project’s node_modules/. @ ./src/services/store/reducers/index.js 14:0-40 27:9-19 @ ./src/services/store/index.js 8:0-34 38:28-36 @ ./src/index.js 13:0-40 22:9-17

Reproducible demo

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 30
Comments: 17

Commits related to this issue

fix: `npm install` by adding `overrides` for rr Credit for this fix goes to https://github.com/facebook/create-react-app/issues/11810#issuecomment-1152378894. — committed to tide-app/tide by hamirmahal a year ago

Most upvoted comments

Just adding a few more information to this thread. I had the issue because one package depended on version ">=0.10.0 <1.0.0" of react-refresh, while the others depended on "^0.11.0". This cause both version 0.11 and 0.12 to be installed. (Note that ^0.11.0 means >=0.11.0 <0.12.0.)

Interestingly Yarn prioritized installing a single version of react-refresh over installing the latest versions, so with Yarn i only got version 0.11.0 installed.

Npm 8.3+ supports overrides, so I could fix my issue by adding this to my package.json file.

"overrides": {
  "react-refresh": "0.11.0"
}

Overriding to version 0.12.0 or ^0.12.0 would probably also have worked.

+87

janaagaard75 on Apr 25, 2022

Just adding a few more information to this thread. I had the issue because one package depended on version ">=0.10.0 <1.0.0" of react-refresh, while the others depended on "^0.11.0". This cause both version 0.11 and 0.12 to be installed. (Note that ^0.11.0 means >=0.11.0 <0.12.0.)

Interestingly Yarn prioritized installing a single version of react-refresh over installing the latest versions, so with Yarn i only got version 0.11.0 installed.

Npm 8.3+ supports overrides, so I could fix my issue by adding this to my package.json file.
"overrides": {
  "react-refresh": "0.11.0"
}
Overriding to version 0.12.0 or ^0.12.0 would probably also have worked.

You saved my day! Thanks!

MeowDevoteam on Jun 10, 2022

For others struggling with this I have found that moving all Storybook packages to devDependencies whilst leaving react-scripts and webpack in dependencies will work. You’ll need to delete package-lock.json and node_modules afterwards and reinstall.

Maybe something about the combination of Storybook, react-scripts and webpack is confusing npm.

More notes (and a reproducible example project) here:

https://github.com/storybookjs/storybook/issues/17049#issuecomment-1004732920

robcaldecott on Jan 4, 2022

Just adding a few more information to this thread. I had the issue because one package depended on version ">=0.10.0 <1.0.0" of react-refresh, while the others depended on "^0.11.0". This cause both version 0.11 and 0.12 to be installed. (Note that ^0.11.0 means >=0.11.0 <0.12.0.)

Interestingly Yarn prioritized installing a single version of react-refresh over installing the latest versions, so with Yarn i only got version 0.11.0 installed.

Npm 8.3+ supports overrides, so I could fix my issue by adding this to my package.json file.
"overrides": {
  "react-refresh": "0.11.0"
}
Overriding to version 0.12.0 or ^0.12.0 would probably also have worked.

Worked like a charm! Recently migrated to Nx, was getting the above mentioned error. Finally got the project running with this approach.

kysivaram on Jul 12, 2023

For others struggling with this I have found that moving all Storybook packages to devDependencies whilst leaving react-scripts and webpack in dependencies will work. You’ll need to delete package-lock.json and node_modules afterwards and reinstall.

Maybe something about the combination of Storybook, react-scripts and webpack is confusing npm.

More notes (and a reproducible example project) here:

storybookjs/storybook#17049 (comment)

Does not work in monorepo like lerna with --hoist option.

igortas on Jan 16, 2022

FWIW I just updated a small app of mine to CRA 5, did a reset of node_modules / package-lock.json, and got this too. Then moving my SB to 6.5.0-alpha.5 (all relevant SB packages) and trying again failed, too (w/ or w/o a dep install reset).

Try checking if “react-refresh” has two versions being used by your app. The problem for most of us was that StoryBook was using a previous version (0.10) and CRA 5.0 needed a new one (0.11). Maybe you have another package using the older version too?

cristiadu on Jan 3, 2022

FWIW I just updated a small app of mine to CRA 5, did a reset of node_modules / package-lock.json, and got this too. Then moving my SB to 6.5.0-alpha.5 (all relevant SB packages) and trying again failed, too (w/ or w/o a dep install reset).

Try checking if “react-refresh” has two versions being used by your app. The problem for most of us was that StoryBook was using a previous version (0.10) and CRA 5.0 needed a new one (0.11). Maybe you have another package using the older version too?

This is what was happening in my case.

ollie@Ollies-MBP build % yarn why react-refresh
├─ nuuka-panel@workspace:.
│  └─ react-refresh@npm:0.12.0 (via npm:^0.12.0)
│
├─ react-scripts@npm:5.0.1
│  └─ react-refresh@npm:0.11.0 (via npm:^0.11.0)
│
└─ react-scripts@npm:5.0.1 [2c7b5]
   └─ react-refresh@npm:0.11.0 (via npm:^0.11.0)

Forcing them all to use the same version via yarn’s resolutions fixed this particular error.

  #package.json
  "resolutions": {
    "react-refresh": "^0.12.0",
  },

Then run yarn install, which then provides

ollie@Ollies-MBP build % yarn why react-refresh
├─ nuuka-panel@workspace:.
│  └─ react-refresh@npm:0.12.0 (via npm:^0.12.0)
│
├─ react-scripts@npm:5.0.1
│  └─ react-refresh@npm:0.12.0 (via npm:^0.12.0)
│
└─ react-scripts@npm:5.0.1 [2c7b5]
   └─ react-refresh@npm:0.12.0 (via npm:^0.12.0)

However, the same cannot be said about the same errors stemming from @pmmmwh/react-refresh-webpack-plugin but that is off topic and a problem which I have not yet solved.

buggedcom on Apr 19, 2022

solved in storybook side with 6.5.0-alpha.5 closing this

crodriguez-plitzi on Dec 23, 2021

Hey, thanks for the follow-up.

It ended up being an incomplete “reset” on my part. SB also wrecked the build phase tho so I scrapped it altogether for that project.

On Mon, Jan 3, 2022, at 18:24, Cristiano Faustino wrote:

FWIW I just updated a small app of mine to CRA 5, did a reset of node_modules / package-lock.json, and got this too. Then moving my SB to 6.5.0-alpha.5 (all relevant SB packages) and trying again failed, too (w/ or w/o a dep install reset).

Try checking if “react-refresh” has two versions being used by your system. The problem for most of us was that StoryBook was using a previous version (0.10) and CRA 5.0 needed a new one (0.11). Maybe you have another package using the older version too?

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/11810#issuecomment-1004240485, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAA5KDOCWY37L3SWTXLCJTUUHLTRANCNFSM5KOCTMEQ. You are receiving this because you commented.Message ID: @.***>

– Christophe Porteneuve @.***

tdd on Jan 3, 2022