ERROR in ./src/App/App.js 1:40-130
Module not found: Error: You attempted to import /Users/caldecor/Projects/digital-workshop/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 12:0-32 112:41-44
npm ls react-refresh shows this:
servicehub-workshop@1.0.0
├─┬ UNMET PEER DEPENDENCY @storybook/react@6.5.0-alpha.6
│ └── react-refresh@0.11.0 
└─┬ react-scripts@5.0.0
  └── react-refresh@0.11.0 
npm ERR! peer dep missing: @storybook/react@>=5.2, required by @storybook/preset-create-react-app@4.0.0
npm ERR! peer dep missing: @storybook/react@>= 3.2.16, required by storybook-addon-intl@2.4.1
Environment Info:
  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 95.0
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-a11y: ^6.5.0-alpha.6 => 6.5.0-alpha.6 
    @storybook/addon-essentials: ^6.5.0-alpha.6 => 6.5.0-alpha.6 
    @storybook/builder-webpack5: ^6.5.0-alpha.6 => 6.5.0-alpha.6 
    @storybook/manager-webpack5: ^6.5.0-alpha.6 => 6.5.0-alpha.6 
    @storybook/preset-create-react-app: ^4.0.0 => 4.0.0 
    @storybook/react: ^6.5.0-alpha.6 => 6.5.0-alpha.6
Storybook itself is working fine but I cannot start my app using react-scripts start.
I will roll back to react-scripts 4 and try to put together a reproducible demo.
          
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)
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.
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.
          
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.
  JinWangQ, youngfreezy, anthonyorona, asblanco, nickhingston, Lukasz-Michalczak, PavloRudenko, pmagictech, cloverink, mlipilin, and 20 more reacted with thumbs up emoji
  MeowDevoteam, foolcatxd, jwilger, JamesRamm, evagm, Motiveko, mlipilin, ColmBhandal, NicolasLeRoux, bgriffith, and 11 more reacted with heart emoji
  mertd, kleber-gueriero, jakubprogramming, and aurel282 reacted with rocket emoji
      All reactions
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!
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.