StoryBook构建报错：Cannot read properties of null (reading 'babel')

问题 #

执行StoryBook构建命令：

cross-env NODE_PATH="src" build-storybook -c .storybook -o docs

时触发以下错误：

TypeError: Cannot read properties of null (reading 'babel')
ERR!     at _callee$ (node_modules\@storybook\react\node_modules\@storybook\telemetry\dist\cjs\storybook-metadata.js:194:52)
ERR!     at tryCatch (node_modules\regenerator-runtime\runtime.js:63:40)
ERR!     at Generator.invoke [as _invoke] (node_modules\regenerator-runtime\runtime.js:294:22)
ERR!     at Generator.throw (node_modules\regenerator-runtime\runtime.js:119:21)
ERR!     at asyncGeneratorStep (node_modules\@storybook\react\node_modules\@storybook\telemetry\dist\cjs\storybook-metadata.js:66:103) 
ERR!     at _throw (node_modules\@storybook\react\node_modules\@storybook\telemetry\dist\cjs\storybook-metadata.js:68:291)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)

但启动命令cross-env NODE_PATH="src" start-storybook可正常运行StoryBook。当前.storybook/config.jsx配置如下：

// .storybook/config.jsx
module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  babel: async options => ({
    ...options,
    presets: [['@babel/preset-react', {runtime: 'automatic'}]]
  })
};

解决方法 #

1. 将babel配置改为同步函数 #

构建流程中的telemetry模块不支持异步babel配置函数，移除async关键字即可：

// .storybook/config.jsx
module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  babel: options => ({
    ...options,
    presets: [['@babel/preset-react', {runtime: 'automatic'}]]
  })
};

2. 禁用StoryBook telemetry功能 #

如果不想修改配置结构，可通过两种方式禁用telemetry：

• 在构建命令中添加环境变量：

  cross-env NODE_PATH="src" STORYBOOK_TELEMETRY_DISABLED=1 build-storybook -c .storybook -o docs
  

• 在配置文件中添加禁用项：

  // .storybook/config.jsx
  module.exports = {
    stories: ['../src/**/*.stories.tsx'],
    babel: async options => ({
      ...options,
      presets: [['@babel/preset-react', {runtime: 'automatic'}]]
    }),
    telemetry: false
  };
  

3. 升级StoryBook版本 #

该问题是旧版本StoryBook的telemetry模块bug，升级到v6.5及以上的稳定版本即可修复：

npx sb upgrade

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