基于Vite/Storybook的组件库在消费项目中编译失败

报错里的??是ES2020引入的空值合并运算符，消费项目的Webpack无法解析该语法，核心原因有两个：

• 组件库打包时未将代码转译为消费项目Webpack支持的JS版本
• 消费项目Webpack默认不转译node_modules中的文件，导致组件库的高版本语法无法被处理

方案1：调整组件库的Vite打包配置 #

修改组件库的vite.config.ts，指定打包目标为更低版本的ES标准，同时完善外部依赖配置：

export default defineConfig({
  build: {
    // 指定兼容的ES版本，让Rollup自动转译高版本语法
    target: 'es2015',
    lib: {
      entry: {
        components: path.resolve(__dirname, "src/index.ts"),
      },
      fileName: (format, entry) =>
        `name-component-library.${entry}.${format}.js`,
      formats: ["es", "umd"],
      name: "nameComponents",
    },
    rollupOptions: {
      // 补充所有第三方依赖到external，避免将其代码打包进组件库
      external: ["react", "react-dom", "@emotion/react", "@emotion/styled", "@mui/material", "@mui/icons-material"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "@emotion/react": "EmotionReact",
          "@emotion/styled": "EmotionStyled",
          "@mui/material": "MaterialUI",
          "@mui/icons-material": "MaterialUIIcons"
        },
      },
    },
  },
  plugins: [
    react(),
    tsConfigPaths(),
    dts({
      include: ["src"],
    }),
  ],
});

方案2：修改消费项目的Webpack配置 #

如果无法调整组件库，可在消费项目中配置Webpack转译组件库代码：

1. 确保项目已安装babel-loader、@babel/preset-env、@babel/preset-react依赖
2. 修改Webpack配置文件，将组件库加入转译范围：

const path = require('path');

module.exports = {
  // ...其他原有配置
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        // 包含项目源码和组件库目录
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/@name/component-library')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-react',
              ['@babel/preset-env', { targets: 'defaults' }]
            ]
          }
        }
      }
    ]
  }
};

方案3：检查组件库的TypeScript配置 #

确保组件库的tsconfig.json设置了正确的编译目标：

{
  "compilerOptions": {
    "target": "ES2015",
    // ...其他原有配置
  }
}

让TypeScript编译时直接输出兼容版本的JS代码，配合Vite配置双重保障。

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