“npm run Storybook”在新的 React 项目上失败

Question

我跑去npx sb init安装一个新的 React 应用程序，该应用程序由npx create-teact-app blah

当我尝试运行时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.jsondevDependency 是

"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.jsonfornode-modules/react-refresh

我懂了

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

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

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

Answer 1

查看react-refresh存储库，看起来这个问题在更高版本中已修复。

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