使用ChakraUI/React18时Storybook+Vite构建失败求助

我正在使用Vite和Storybook开发一个UI库，Storybook构建出现故障：开发模式下构建过程会弹出错误，但仍能正常浏览组件；生产构建会因相同错误直接失败。生产构建完成后生成了文件，但用http-server服务静态文件夹时，Storybook会显示空白提示框，提示“No preview”。

错误信息 #

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.
|     __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，搭配Vite构建器的Storybook 6.5，尝试切换Webpack 4和5后情况更糟，在Chakra UI和Storybook的问题库中找了大量方案都无效。

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,
  },
}

内容的提问来源于stack exchange，提问作者RGR