Question

“npm run build-storybook”返回错误“TypeError：无法将未定义或空转换为对象”

2023-11-01

983

vite storybook vite-reactjs

我有一个使用 Vite 构建的 React 项目。我刚刚通过“ npx storybook@latest init ”添加了一个故事书，因此添加了“ npm install @storybook/builder-vite --save-dev ”。

我可以通过“npm run storybook”在本地运行故事书，效果很好

但是当我通过“ npm run build-storybook ”构建静态故事书页面时，我得到了一个生成的文件夹“storybook-static”，并且 出现以下错误 ：

@storybook/cli v7.5.2

info => Cleaning outputDir: /storybook-static
info => Loading presets
info => Building manager..
info => Manager built (77 ms)
info => Building preview..
info => Copying static files: /Users/dk/Dev/bli-ui/node_modules/@storybook/manager/static at /Users/dk/Dev/bli-ui/storybook-static/sb-common-assets
=> Failed to build the preview // 👈 The error starts here
TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at configResolved (file://./node_modules/vite-plugin-dts/dist/index.mjs:581:100)
    at file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66031:28
    at Array.map (<anonymous>)
    at resolveConfig (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:66031:14)
    at async build (file://./node_modules/vite/dist/node/chunks/dep-bb8a8339.js:47926:20)
    at async build (./node_modules/@storybook/builder-vite/dist/index.js:159:11030)
    at async Promise.all (index 0)
    at async Module.build2 (./node_modules/@storybook/builder-vite/dist/index.js:159:13349)
    at async Promise.all (index 0)

我的 main.js 文件：

import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  core: {
    builder: '@storybook/builder-vite', 
  },
}
export default config

这里出了什么问题？我试过谷歌搜索，但没有找到任何帮助。

Answer 1

这确实是由“vite-plugin-lib-inject-css”引起的。您可以使用 Storybook 配置中的 withoutVitePlugins 助手从 Storybook 构建中排除有问题的插件。

import { withoutVitePlugins } from '@storybook/builder-vite'
...
const config: StorybookConfig = {
    ...
    async viteFinal(config) {
        return {
            ...config,
            plugins: await withoutVitePlugins(config.plugins, ['vite:lib-inject-css']),
        }
    },
}

Answer 2

您使用“vite-plugin-lib-inject-css”吗？我遇到了与您相同的问题，删除它有帮助。

DanielB

2023-11-07

Answer 3

这是插件 vite-plugin-lib-inject-css 的一个已知问题（ #15 ），已在 2.0.0 版本中修复，如果您将插件更新到最新版本，就应该没问题了。