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

Issue Analytics

State:
Created 2 years ago
Reactions:16
Comments:13

Top GitHub Comments

26reactions

janaagaard75commented, 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.

3reactions

robcaldecottcommented, Jan 4, 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

Top Results From Across the Web

Compilation error due to (non-existant) import of react-refresh

tsx 1:40-155 Module not found: Error: You attempted to import /home/newlukai/story/app/node_modules/react-refresh/runtime.js which falls outside ...

How to use the react-refresh/runtime. ...

To help you get started, we've selected a few react-refresh examples, based on popular ways it is used in public projects. Secure your...

pmmmwh/react-refresh-webpack-plugin

An EXPERIMENTAL Webpack plugin to enable "Fast Refresh" (also known as Hot Reloading) for React components. This plugin is not 100% stable.

pmmmwh/react-refresh-webpack-plugin

Start using @pmmmwh/react-refresh-webpack-plugin in your project by running `npm ... There are 1405 other projects in the npm registry using ...

Create React App CRA - Error: You attempted to import ...

src /stories/Header.js Module not found: Error: You attempted to import /repos/my-app/node_modules/react/jsx-dev-runtime which falls outside of the project ...