storybook 与ts-loader、webpack 5和type module的兼容性问题

vfwfrxfs 于 4个月前发布在 Webpack

关注(0)|答案(7)|浏览(81)

描述问题

在使用 npx sb init --builder webpack5 后无法运行 storybook

ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (52:0)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

重现方法

请按照以下步骤创建重现：运行 npx sb@next repro 并遵循说明。
上面的命令不起作用，我得到了以下错误：
/bin/sh: 1: yarn: not found
失败可能是因为我的系统上没有 yarn(Ubuntu 20.04 LTS)。
但是在这里的重现方法是：运行 npm i,然后运行 npm run storybook。在运行上述 sb init 命令后，我没有更改与 storybook 相关的任何内容。

系统信息

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 88.0.1
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9 
    @storybook/addon-essentials: ^6.2.9 => 6.2.9 
    @storybook/addon-links: ^6.2.9 => 6.2.9 
    @storybook/builder-webpack5: ^6.2.9 => 6.2.9 
    @storybook/react: ^6.2.9 => 6.2.9

附加上下文

我正在尝试在一个使用 Webpack 5 和 ts-loader 的 React 项目中进行 storybook 的全新安装。同时在 package.json 中使用了 type: "module",这导致了一个初始错误，我通过这样做来修复它。
我的最佳猜测是 storybook 想要使用 babel-loader,但我的项目根本不使用 babel,整个转换完全由 ts-loader 按照 webpack 文档的建议处理。因此，作为偏好，如果 Storybook 能够仅使用 webpack 配置而不是安装额外的 babel 包就更好了。

storybook

来源：https://github.com/storybookjs/storybook/issues/15148

7条答案

按热度按时间

ezykj2lf1#

Storybook使用babel处理typescript文件。有人要求支持ts-loader,但它不在我们的路线图上。

赞(0）回复(0）举报 4个月前

pobjuy322#

当我从 package.json 中移除 type: "module" 时，storybook 可以成功运行。因此，尽管这是一个不同的控制台错误，但上述错误可能与 #11587 有很大关系。
我找到了一个解决方法。在 package.json 中，storybook 不能与 type: "module" 一起使用，所以必须将其删除。但是，es6 的 import/export 语法仍然可以在 .mjs 扩展名下使用，所以我只需要将 webpack.config.js 重命名为 webpack.config.mjs,一切都可以正常工作。
顺便说一下，我最近了解到 babel-loader 不执行任何类型检查。在工作中，我们观察到 storybook 经常无法报告稍后由打包器捕获的类型错误，当我们开始单独使用 storybook 开发组件时。这可能是考虑使用 ts-loader 作为 typescript 的另一个原因。

赞(0）回复(0）举报 4个月前

vxbzzdmp3#

感谢提醒！我们有一个可选的检查选项，使用 fork-ts-checker-webpack-plugin https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration

赞(0）回复(0）举报 4个月前

vnjpjtjt4#

在一个nx monorepo中，我在相应的package.json文件中有"type": "commonjs",移除了该属性后它就可以正常工作了。

赞(0）回复(0）举报 4个月前

qxgroojn5#

我仍然在使用storybook 6.5和一个create-react-app类型的typescript项目时遇到这个问题。
我已经尝试了@shilman提供的解决方法，但仍然出现错误。到目前为止，我已经尝试了很多解决方法，但都没有解决问题。
这里是.storybook/main.cjs:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  "typescript": {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
}

以及storybook的版本package.json:

"@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/node-logger": "^6.5.16",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",

如果有任何帮助，我将不胜感激。很遗憾的是，暂时我还无法摆脱CRA的问题。

赞(0）回复(0）举报 4个月前

rggaifut6#

@cbroomemktw升级到最新的预发布版本是否解决了问题？
迁移指南：https://storybook.js.org/migration-guides/7.0

赞(0）回复(0）举报 4个月前

x0fgdtte7#

@shilman 它确实做到了！至少通过npx sb@next init从头开始安装所有内容，谢谢！

赞(0）回复(0）举报 4个月前