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

1. installed new version
2. yarn start (react-scripts start)
3. 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

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

Reproducible demo

[janaagaard75]

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.

[robcaldecott]

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