【发布时间】：2022-10-14 02:41:09
【问题描述】：
我正在创建一个带有 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
我使用最新版本的脉轮，反应 18，情感 11 和故事书 6.5 与 vite builder。我尝试使用 webpack 4 和 5，但情况更糟。我在 chakra ui 问题、故事书的问题中搜索了很多解决方案，但似乎没有任何效果。
在生产中，我构建了一些文件，但是当使用 http-server 提供静态文件夹时，我有一个空白警报，其中包含来自故事书的“无预览”消息。
这是我的 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,
},
}
非常感谢您的帮助:)
【问题讨论】：
标签： storybook vite emotion chakra-ui react-18