`npm run storybook` 在新的反应项目中失败

Posted 2023-02-19

【中文标题】`npm run storybook` 在新的反应项目中失败

【英文标题】：`npm run storybook` failing on fresh react project

【发布时间】：2021-11-25 01:30:48

【问题描述】：

我运行 npx sb init 来安装由 npx create-teact-app blah 创建的全新 React 应用程序

当我尝试运行 npm run storybook 时，出现以下错误

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

我的package.json devDependencies 是

"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"

我已经完成了npm ls react-refresh，它看起来像是被 @storybook/react@6.3.9拉进来了

当我查看package.json 的node-modules/react-refresh 时

我明白了

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

但是包文件夹中没有“index.js”文件，我理解这个问题，但不知道如何解决。

我尝试使用早期版本的故事书，但问题仍然存在。

【参考方案1】：

查看react-refresh 存储库，看来此问题已在更高版本中得到修复。

做npm install --save-dev react-refresh解决了它