storybook: Module not found: Error: You attempted to import /node_modules/react-refresh/runtime.js which falls outside of the project src/ directory

Describe the bug related to the new RCA 5 using @storybook/react: 6.4.9 im getting this problem https://github.com/facebook/create-react-app/issues/11810 is there a way to solve it ? if i remove this dependency works good

To Reproduce create a new RCA 5 project, and add storybook and start RCA (yarn start)

“@storybook/addon-actions”: “^6.4.9”, “@storybook/addon-essentials”: “^6.4.9”, “@storybook/addon-links”: “^6.4.9”, “@storybook/node-logger”: “^6.4.9”, “@storybook/preset-create-react-app”: “^4.0.0”, “@storybook/react”: “^6.4.9”,

System Please paste the results of npx sb@next info here.

Additional context Add any other context about the problem here.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 9
Comments: 15 (3 by maintainers)

Commits related to this issue

fix: react-refresh 관련 오류 해결 https://github.com/storybookjs/storybook/issues/17049 — committed to hozzijeong/react-shopping-cart by hozzijeong a year ago
[장바구니 미션 Step 2] 클린(정호진) 미션 제출합니다. (#199) * refactor: toast ui 종료 관련 로직 관심사 분리 * feat: localStorage get/set hook 구현 * refactor: toast 객체 생성 및 프로퍼티로 동작 추상화 * feat: msw 설치 및 초기 데이터 fetching 설정... — committed to woowacourse/react-shopping-cart by hozzijeong a year ago

Most upvoted comments

Was able to find a workaround for conflict versions for the time being

Ran npm ls react-refresh and it shows a different of react-refresh package versions

├─┬ @storybook/preset-create-react-app@4.1.2
│ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
│   └── react-refresh@0.14.0
├─┬ @storybook/react@6.5.7
│ └── react-refresh@0.11.0
└─┬ react-scripts@5.0.1

Ran npm dedupe to de-duplicate multiple versions
Ran npm ls react-refresh to check existing versions for react-refresh

├─┬ @storybook/preset-create-react-app@4.1.2
│ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
│   └── react-refresh@0.11.0 deduped
├─┬ @storybook/react@6.5.7
│ └── react-refresh@0.11.0
└─┬ react-scripts@5.0.1
  └── react-refresh@0.11.0 deduped

npm start compiles & runs successfully

+68

nephykoda on Aug 2, 2022

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.5 containing PR #17056 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

shilman on Dec 23, 2021

had to also do

cd node_modules/react-scripts

npm dedupe

ilanah on Feb 7, 2023

The storybook/react need to update the dependencies version. I just check the 6.5.0-alpha.1 to 6.5.0-alpha.4, the config not update.

react-scripts@5.0.0: “@pmmmwh/react-refresh-webpack-plugin” “^0.5.3” react-refresh “^0.11.0”

storybook/react@6.4.9: “@pmmmwh/react-refresh-webpack-plugin”: ^0.5.1 react-refresh: ^0.10.0

Here is the pull request

If you can’t wait for the next version, you can do the hard code on node_modules.

phnessu4 on Dec 22, 2021

After much more trial and error I can only get this to work if react-scripts and webpack are in the dependencies list and all the Storybook packages are in devDependencies (and after moving things around you have to remove the lock file and node_modules before reinstalling.)

So it’s a bit messy.

https://github.com/robcaldecott/storybook-react-scripts-webpack5/blob/fix/package.json

I’m using node 14 and npm 6.14.15. It would be interesting to see if later versions of npm suffer from this issue.

robcaldecott on Jan 4, 2022