5

I ran npx sb init to install in a fresh React application created by npx create-teact-app blah

When I attempt to run npm run storybook I get the following errors

ModuleNotFoundError: Module not found: Error: Cannot find module 'E:\Development\avask\blah\node_modules\react-refresh\index.js'. Please verify that the package.json has a valid "main" entry
    at E:\Development\avask\blah\node_modules\webpack\lib\Compilation.js:925:10
    at E:\Development\avask\blah\node_modules\webpack\lib\NormalModuleFactory.js:401:22
    at E:\Development\avask\blah\node_modules\webpack\lib\NormalModuleFactory.js:139:22
    at _next0 (eval at create (E:\Development\avask\blah\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (E:\Development\avask\blah\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:1)
    at E:\Development\avask\blah\node_modules\react-dev-utils\ModuleNotFoundPlugin.js:136:17
    at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:158:9
    at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:113:7
    at CaseSensitivePathsPlugin.fileExistsWithCase (E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:83:5)
    at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:106:10
    at E:\Development\avask\blah\node_modules\case-sensitive-paths-webpack-plugin\index.js:67:5
    at E:\Development\avask\blah\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:77:11)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] storybook: `start-storybook -p 6006 -s public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\TheBritishAreComing\AppData\Roaming\npm-cache\_logs\2021-10-04T15_59_44_158Z-debug.log

My package.json devDependencies are

"devDependencies": {
    "@storybook/addon-actions": "^6.3.9",
    "@storybook/addon-essentials": "^6.3.9",
    "@storybook/addon-links": "^6.3.9",
    "@storybook/node-logger": "^6.3.9",
    "@storybook/preset-create-react-app": "^4.0.0",
    "@storybook/react": "^6.3.9"
}

and I've done npm ls react-refresh it looks like it's being pulled in by @storybook/[email protected]

When i look at the package.json for node-modules/react-refresh

I see

"license": "MIT",
"main": "index.js",
"name": "react-refresh",

But there is no file "index.js" in the package folder, I understand the issue but not sure how I resolve it.

I've tried using an earlier version of storybook but the problem persists.

1 Answer 1

7

Looking through the react-refresh repo, it looks like this was fixed in a later version.

doing npm install --save-dev react-refresh resolved it

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.