Search code examples
reactjsstorybook

`npm run storybook` failing on fresh react project

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! blah@0.1.0 storybook: `start-storybook -p 6006 -s public`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the blah@0.1.0 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/react@6.3.9

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.

Solution

  • 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