webpack Storybook -无法解析“generated-stories-entry.cjs”/字段“浏览器”不包含有效的别名配置

q43xntqr  于 2022-11-24  发布在  Webpack
关注(0)|答案(2)|浏览(255)

在我的Next.js应用程序上运行installing and configuring Storybook并运行build-storybook后,我收到以下错误。

  • 注意 *:我使用的是npm版本8.19.1。项目是用Typescript编写的。
> msun@0.1.0 storybook:build
> build-storybook

info @storybook/react v6.5.13
info 
info => Cleaning outputDir: /Users/msun/Documents/msun/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using PostCSS preset with postcss@8.4.19
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
65% building 14/14 entries 18/18 dependencies 2/6 modulesinfo => Manager built (7.26 s)
ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR!  ModuleNotFoundError: Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/Compilation.js:2016:28
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:798:13
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:270:22
ERR!     at eval (eval at create (/Users/msun/Documents/msun/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:434:22
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:116:11
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:670:25
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:855:8
ERR!     at /Users/msun/Documents/msun/node_modules/webpack/lib/NormalModuleFactory.js:975:5
ERR! resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
ERR!   using description file: /Users/msun/Documents/msun/package.json (relative path: .)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     root path /Users/msun/Documents/msun
ERR!       using description file: /Users/msun/Documents/msun/package.json (relative path: ./Users/msun/Documents/msun/generated-stories-entry.cjs)
ERR!         no extension
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!         .mjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!         .js
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!         .jsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!         .ts
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!         .tsx
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!         .json
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!         .cjs
ERR!           Field 'browser' doesn't contain a valid alias configuration
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!         as directory
ERR!           /Users/msun/Documents/msun/Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!     using description file: /Users/msun/Documents/msun/package.json (relative path: ./generated-stories-entry.cjs)
ERR!       no extension
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
ERR!       .mjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.mjs doesn't exist
ERR!       .js
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.js doesn't exist
ERR!       .jsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.jsx doesn't exist
ERR!       .ts
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.ts doesn't exist
ERR!       .tsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.tsx doesn't exist
ERR!       .json
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.json doesn't exist
ERR!       .cjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs.cjs doesn't exist
ERR!       as directory
ERR!         /Users/msun/Documents/msun/generated-stories-entry.cjs doesn't exist
info => Loading presets
npm notice 
npm notice New major version of npm available! 8.19.1 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g npm@9.1.2 to update!
npm notice
kq0g1dla

kq0g1dla1#

根据Storybook的维护者所述,最近发布的enhanced-resolve(Storybook的一个依赖项)导致使用Webpack的Storybook安装中断。如果您1)最近安装了全新的Storybook,2)未使用软件包锁定文件,或3)删除了软件包锁定文件并运行install,则可能会遇到此问题。

解决方法

Pending a permanent fix,一个临时的解决方法是将enchanced-resolve固定到最新的工作版本5.10.0

将以下行添加到package.json。删除node_modules并重新安装。

每天下午

// package.json
{
  "overrides": {
    "enhanced-resolve": "5.10.0"
  }
}
  • 注意 *:您可能必须升级到最新的npm,覆写才能运作。npm install -g npm@latest

Yarn

// package.json
{
  "resolutions": {
    "enhanced-resolve": "5.10.0"
  }
}

下午

// package.json
{
  "pnpm": {
    "overrides": {
      "enhanced-resolve": "5.10.0"
    }
  }
}

warning Resolution field "enhanced-resolve@5.10.0" is incompatible with requested version "enhanced-resolve@x.y.z"

正如这里所提到的,全局覆盖对于依赖于不同版本的enhanced-resolve的项目可能会有问题。如果您遇到上面的警告,请尝试使覆盖更具体(* 假设您的Storybook安装使用webpack5*):

"webpack@5/enhanced-resolve": "5.10.0"

(感谢Github用户pm0u

yhxst69z

yhxst69z2#

如果你得到“package.json中不允许的属性”,你可以使用npm i enhanced-resolve@5.10.0,然后尝试“npm run storybook”。2它会起作用的。

相关问题