首页 / 技术问答 / Reactjs问答列表 / 问答详情

Reactjs Storybook 无法解析generatedstoriesentry.cjs字段browser不包含有效的别名配置

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

Note:我使用的是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

推荐答案

According to the maintainer of Storybook时，最近发布了enhanced-resolve(对Storybook的依赖)，最终 destruct 了使用webpack的Storybook安装.如果您1)最近安装了全新的故事本，2)不使用软件包锁文件，或3)删除了软件包锁文件并运行install，则可能会遇到此问题.

解决方法

Pending a permanent fix，临时解决方法包括将enchanced-resolve固定到最新工作版本5.10.0.

一百零二

npm

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

Note:您可能必须升级到最新的NPM才能使覆盖生效.npm install -g npm@latest个

Yarn

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

pnpm

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

警告解决方案字段"Enhanced-Resolve@5.10.0"与请求的版本"Enhanced-Resolve@x.y.z"不兼容

正如前面提到的here，对于依赖于不同版本enhanced-resolve的依赖项的项目，全局覆盖可能是有问题的.如果您遇到上述警告，请try 使覆盖更具体(assuming your Storybook installation uses webpack5):

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

(感谢Github用户pm0u)

Reactjs相关问答推荐

sourceBuffer. appendBuffer成功，但h5视频播放器卡住了

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

在数组对象内的数组上进行映射

子路径上未定义useMatches句柄

当项目开始时，它不会从三元运算符(REACT)加载一些tailwind 类名称

React路由dom布局隐藏内容

尽管所有页面在 Reactjs 中都是公开的，但始终导航到特定页面

react 本机屏幕转换

REACT： UseState 没有更新变量(ant design 模态形式)

无法使axiosmockadapter正常工作

React - 如何重定向页面以显示数据修改？

即使配置了 webpack.config.js，html-loader 也不起作用

React v6 中的公共和私有路由

为嵌套路由配置一个不存在的 url 的重定向

next js 13 在获取中使用标头时动态渲染而不是静态渲染？

导入样式化组件时未导入组件内容

错误：无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

如何解决在 react.js 中找不到模块错误

如何在 JSX 中使用 -webkit- 前缀？

React useEffect hooks return () => cleanup() vs return cleanup

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630