升级Storybook至v7.1.0后构建失败，遇Terser与Webpack报错

AI 小北

2026-7-15

Storybook v7.1.0 构建失败（Terser/Webpack 错误）

我在 Next.js 项目中将 Storybook 从 v6.5.9 升级到 v7.1.0 后，项目运行正常，但执行构建时抛出以下错误：

ERR! => Failed to build the preview
ERR! 1620.ba7f2216.iframe.bundle.js from Terser plugin
ERR! Unexpected token: punc ({) [webpack://../node_modules/@storybook/components/dist/index.mjs:195,5420][1620.ba7f2216.iframe.bundle.js:5264,5512]
ERR!     at js_error (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:550:11)
ERR!     at croak (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1274:9)
ERR!     at token_error (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1282:9)
ERR!     at unexpected (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1288:9)
ERR!     at as_property_name (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3076:20)
ERR!     at concise_method_or_getset (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2729:20)
ERR!     at class_ (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2685:22)
ERR!     at expr_atom (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2514:23)
ERR!     at maybe_unary (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3310:19)
ERR!     at expr_ops (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3361:24)
ERR! 1620.98ef3ea2.iframe.bundle.js from Terser plugin
ERR! Unexpected token: punc ({) [1620.98ef3ea2.iframe.bundle.js:5264,5512]
ERR!     at js_error (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:550:11)
ERR!     at croak (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1274:9)
ERR!     at token_error (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1282:9)
ERR!     at unexpected (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1288:9)
ERR!     at as_property_name (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3076:20)
ERR!     at concise_method_or_getset (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2729:20)
ERR!     at class_ (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2685:22)
ERR!     at expr_atom (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2514:23)
ERR!     at maybe_unary (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3310:19)
ERR!     at expr_ops (/Users/mac/Documents/Next/vactory_next/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3361:24)
ERR! Critical dependency: the request of a dependency is an expression
ERR! Critical dependency: the request of a dependency is an expression
ERR! Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
ERR! Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
ERR! Error: => Webpack failed, learn more with --debug-webpack
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/dist/index.js:1:7618
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/HookWebpackError.js:68:3
ERR!     at Hook.eval [as callAsync] (eval at create (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Cache.shutdown (/Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Cache.js:150:23)
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1229:15
ERR!     at Hook.eval [as callAsync] (eval at create (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Compiler.close (/Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1222:23)
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/dist/index.js:1:7570
ERR!  Error: => Webpack failed, learn more with --debug-webpack
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/dist/index.js:1:7618
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/HookWebpackError.js:68:3
ERR!     at Hook.eval [as callAsync] (eval at create (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Cache.shutdown (/Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Cache.js:150:23)
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1229:15
ERR!     at Hook.eval [as callAsync] (eval at create (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/mac/Documents/Next/vactory_next/node_modules/tapable/lib/Hook.js:18:14)
ERR!     at Compiler.close (/Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1222:23)
ERR!     at /Users/mac/Documents/Next/vactory_next/node_modules/@storybook/builder-webpack5/dist/index.js:1:7570
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/local/Cellar/node@16/16.20.0/bin/node
Arguments: /usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js storybook:build
Directory: /Users/mac/Documents/Next/vactory_next/apps/starter
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.

报错指向 Terser 插件和 Webpack，求可行的解决思路。

解决思路

更新 Terser 相关依赖：错误显示 Terser 无法解析 ES 语法（比如类中的箭头函数方法），可能是当前 Terser 版本过低。手动升级 terser-webpack-plugin 到最新兼容版本，或者直接更新 Storybook 相关的 Webpack 依赖，确保版本匹配。

调整 Storybook 的 Webpack 配置：在 .storybook/main.js 中修改 Terser 插件的配置，明确指定支持的 ES 版本。示例配置：

module.exports = {
  webpackFinal: async (config) => {
    config.optimization.minimizer.forEach(minimizer => {
      if (minimizer.constructor.name === 'TerserPlugin') {
        minimizer.options.terserOptions = {
          ...minimizer.options.terserOptions,
          ecma: 2020,
          parse: { ecma: 2020 },
          compress: { ecma: 2020 },
          mangle: { safari10: true }
        };
      }
    });
    return config;
  },
};

检查 Babel 配置兼容性：Storybook v7 对 Babel 配置有新要求，确保项目的 Babel 配置（如 .babelrc 或 babel.config.js）能正确转译 @storybook/components 这类依赖。可以尝试在 Storybook 配置中明确添加 @babel/preset-env 并设置目标环境。
清理缓存并重新安装依赖：删除 node_modules、yarn.lock/package-lock.json，清理 Storybook 和 Webpack 的缓存（比如 node_modules/.cache 目录），然后重新安装依赖，避免版本冲突。
降级 Storybook 版本或临时关闭压缩：如果以上方法无效，可以先降级到 v7.x 的稳定小版本（比如 v7.0.27）；或者临时关闭构建压缩（不建议生产环境使用），在 Storybook 配置中设置 optimization.minimize: false。

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