升级Storybook 7.x搭配NextJS：如何解决模块转译问题？

安全阿岳

2026-7-16

Storybook 7.x + Next.js 模块转译问题解决方案

问题根源

Storybook 7.x 的 @storybook/nextjs 框架已经内置了第三方模块转译支持，无需再依赖 next-transpile-modules，原配置中混用两者会导致转译逻辑冲突。

修改后的配置代码

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.js"],
  addons: [
    "@storybook/addon-links", 
    "@storybook/addon-essentials", 
    "@storybook/preset-scss"
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {}
  },
  docs: {
    autodocs: true
  },
  // 自定义webpack配置处理模块转译
  async webpackFinal(config) {
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [
        path.resolve(__dirname, "../node_modules/module1"),
        path.resolve(__dirname, "../node_modules/module2")
      ],
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"]
        }
      }
    });
    return config;
  }
};

关键调整说明

移除 next-transpile-modules 依赖及相关代码，避免与Storybook内置转译逻辑冲突。
移除 storybook-addon-next，@storybook/nextjs 已集成该插件的核心功能，继续使用可能引发兼容问题。
通过 webpackFinal 扩展webpack配置，手动指定需要转译的模块路径，用babel-loader处理转译。

补充注意事项

确保已安装必要的Babel依赖：@babel/core、babel-loader、@babel/preset-react、@babel/preset-env，未安装的话执行以下命令安装：
```
npm install -D @babel/core babel-loader @babel/preset-react @babel/preset-env
```
若目标模块是TypeScript编写，需将 test 改为 /\.(ts|tsx)$/，并在presets中添加 @babel/preset-typescript。