如何解决Next.js+Storybook构建时Babel的TSSatisfiesExpression错误？

可行解决方案： #

• 检查Babel TypeScript插件版本
  TSSatisfiesExpression是TypeScript 4.9+新增语法对应的AST节点，@babel/preset-typescript从7.21.0版本开始支持该节点。确保依赖版本达标，执行以下命令更新：

  npm update @babel/preset-typescript @babel/core
  # yarn用户执行这条
  yarn upgrade @babel/preset-typescript @babel/core
  

• 统一Storybook与Next.js的Babel配置
  让Storybook复用Next.js的Babel配置，避免版本或规则不一致引发问题。在.storybook/main.js中修改配置：

  module.exports = {
    babel: async (options) => {
      options.presets.push(require.resolve('next/babel'));
      return options;
    },
    // 其他Storybook配置项...
  };
  

• 清理缓存后重新构建
  缓存可能残留旧版本的AST定义，执行以下命令清理后重新构建：

  rm -rf .next node_modules/.cache storybook-static
  # 执行对应构建命令，例如
  npm run build
  npm run build-storybook
  

• 排查自定义Babel插件冲突
  如果项目使用了自定义或第三方Babel插件，检查这些插件是否支持TSSatisfiesExpression节点。存在不兼容插件时，暂时禁用或更新到最新兼容版本。

错误日志示例： #

[BABEL] You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type

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