Storybook HTML部署Chromatic失败：模块解析报错'public'是保留关键字

本地构建 Storybook 正常，但发布到 Chromatic 时构建失败，报错如下：

module parse failed, keyword 'public' is reserved
file was processed with babel-loader, 
you may need additional loader to handle such files

当前使用的 Webpack 配置片段：

const jsBabel = {
  test: /\.[j|t]s?$/,
  exclude: /node_modules/,
  include: [path.resolve(config.root, config.paths.src)],
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              corejs: '3.5.0',
              useBuiltIns: 'usage',
            },
          ],
          '@babel/preset-typescript',
        ],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
      },
    },
  ],
};

// select scripts loader
const scripts = [config.env === 'production' ? jsBabel : js, ts];

我的 tsconfig.json 中有如下配置：

"outDir": "./dist/",

而 Storybook 的构建目录是 storybook-static，请问这会不会是导致构建失败的原因？

问题解答 #

这个报错和 tsconfig.json 里的 outDir 配置无关，核心问题是 Babel 对 TypeScript 类中的 public 关键字处理不到位。

你当前的 Babel 配置里虽然加了 @babel/plugin-proposal-class-properties，但这个插件只处理类属性语法，不负责 TypeScript 的访问修饰符（比如 public/private）。要解决这个问题，需要调整配置：

• 调整 Babel 预设顺序：确保 @babel/preset-typescript 在 @babel/preset-env 之后，因为 TypeScript 预设需要先处理 TS 语法，再由 env 预设转译 ES 特性。
• 扩展 Webpack 规则的 include 范围：当前的 include 只包含项目源码目录，如果你的 Storybook 组件或配置文件在其他目录（比如 .storybook），需要把这些路径也加入 include，否则 Babel 不会处理这些文件里的 TS 语法。
• 合并冗余的 loader 规则：当前代码里 scripts 数组同时加载了 jsBabel 和 ts 规则，可能导致重复处理或冲突，建议合并成单一规则，统一用 babel-loader 处理所有 JS/TS 文件。

修改后的核心配置示例：

const jsBabel = {
  test: /\.[j|t]s?$/,
  exclude: /node_modules/,
  include: [
    path.resolve(config.root, config.paths.src),
    path.resolve(config.root, '.storybook') // 加入 Storybook 配置目录
  ],
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              corejs: '3.5.0',
              useBuiltIns: 'usage',
            },
          ],
          '@babel/preset-typescript', // 放在 env 之后
        ],
        plugins: [
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-object-rest-spread'
        ],
      },
    },
  ],
};

const scripts = [jsBabel]; // 统一用 babel-loader 处理

另外，Chromatic 会使用独立的构建环境，确保本地安装的依赖版本和 Chromatic 运行环境一致，避免因依赖版本差异导致的转译问题。

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