Storybook vite 无法使用 ChakraUI / React 18 构建

Question

我正在使用 Vite 和 Storybook 创建一个 UI 库。可悲的是，故事书的构建已经破碎了。

在开发模式下，我在构建过程中遇到一些错误，但无论如何我可以浏览故事书组件。但生产构建完全失败并出现同样的错误。

这是错误：

ERROR in ./node_modules/@chakra-ui/icons/node_modules/@chakra-ui/icon/dist/index.esm.js 58:28
Module parse failed: Unexpected token (58:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     __css: styles
|   };
>   const _viewBox = viewBox ?? fallbackIcon.viewBox;
|   if (element && typeof element !== "string") {
|     return /* @__PURE__ */ React.createElement(chakra.svg, {
 @ ./node_modules/@chakra-ui/icons/dist/index.esm.js [...lines]
 @ ./node_modules/@chakra-ui/storybook-addon/dist/preset/register.cjs.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-links/manager.js ./node_modules/@storybook/addon-docs/manager.js ./node_modules/@storybook/addon-controls/manager.js ./node_modules/@storybook/addon-actions/manager.js ./node_modules/@storybook/addon-backgrounds/manager.js ./node_modules/@storybook/addon-viewport/manager.js ./node_modules/@storybook/addon-toolbars/manager.js ./node_modules/@storybook/addon-measure/manager.js ./node_modules/@storybook/addon-outline/manager.js ./node_modules/@storybook/addon-interactions/manager.js ./node_modules/@chakra-ui/storybook-addon/dist/preset/register.cjs.js ./.storybook/generated-refs.js

我使用了最新版本的 chakra、react 18、emotion 11 和 Storybook 6.5 以及 vite builder。我尝试使用 webpack 4 和 5，情况更糟。我在 chakra ui 问题、故事书的问题中搜索了很多解决方案，但似乎没有任何效果。

在生产中，我构建了一些文件，但是当使用http服务器提供静态文件夹时，我收到一个空白警报，其中包含来自故事书的“无预览”消息。

这是我的 package.json :

{...},
"type": "module",
"devDependencies": {
    "@babel/core": "^7.18.13",
    "@chakra-ui/storybook-addon": "^4.0.10",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-vite": "^0.2.2",
    "@storybook/jest": "^0.0.10",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@types/react": "^18.0.18",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "babel-loader": "^8.2.5",
    "eslint": "8.23.0",
    "eslint-config-next": "12.2.5",
    "eslint-config-prettier": "8.5.0",
    "eslint-import-resolver-typescript": "^3.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-storybook": "^0.6.4",
    "generate-changelog": "^1.8.0",
    "http-server": "^14.1.1",
    "husky": "8.0.1",
    "lint-staged": "^13.0.3",
    "typescript": "^4.8.2",
    "vite": "^3.0.9",
    "vite-plugin-dts": "^1.4.1",
    "vite-tsconfig-paths": "^3.5.0"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.0.9",
    "@chakra-ui/react": "2.2.1",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "framer-motion": "^7.2.1",
    "nookies": "^2.5.2",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
},

还有我的 .storybook/main.cjs :

module.exports = {
  stories: [
    '../packages/**/*.stories.mdx',
    '../packages/**/*.stories.@(js|jsx|ts|tsx)',
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@chakra-ui/storybook-addon',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
    disableTelemetry: true,
  },
  features: {
    emotionAlias: false,
    storyStoreV7: true,
    modernInlineRender: false,
  },
  reactOptions: {
    legacyRootApi: false,
  },
}

非常感谢您的帮助:)

Answer 1

Chakra-IU 文档的安装部分：

Chakra UI 版本 2 仅与 React 18 兼容。如果您是 仍需要使用 React 17 或更早版本，请使用 version 1 脉轮 UI.

您正在使用

"react": "^18.2.0"

。 使用 v1.* 安装 chakra-ui 库，这应该可以解决您的问题。

Answer 2

我怀疑这是由于缺乏对

??

nullish 合并运算符的支持。

Module parse failed: Unexpected token (58:28)
...
>   const _viewBox = viewBox ?? fallbackIcon.viewBox;
                              ^ ~ char 28 

请注意，在 Storybook 6.5 中，有一些核心包仍然依赖于 Webpack 4：

[Bug]：从@storybook/core-server中删除@storybook/*-webpack4·问题#20062·storybookjs/storybook

您可以通过添加一些 babel 配置来解决此问题：

// .babelrc
{
  "presets": ["@babel/preset-env"]
}