Next.js自定义webpack拆分Sentry chunk报cacheGroups错误如何解决

Next.js 服务端构建流程中，webpack 配置的 optimization.splitChunks 字段默认值为布尔值 false（服务端运行场景不需要浏览器侧的chunk拆分优化逻辑），直接对布尔值读取/赋值cacheGroups属性就会触发你看到的类型错误。

修改next.config.js中的webpack配置段，增加类型兼容判断，同时保留Next.js内置的拆分规则不要直接覆盖：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config, { isServer }) {
    // 仅在splitChunks为对象配置（客户端构建默认开启，服务端默认关闭）时扩展规则
    if (typeof config.optimization.splitChunks !== 'boolean') {
      config.optimization.splitChunks.cacheGroups = {
        // 保留框架内置的cacheGroups配置，避免破坏默认拆分逻辑
        ...config.optimization.splitChunks.cacheGroups,
        sentry: {
          test: /[\\/]node_modules[\\/]@sentry[\\/]/,
          name: 'sentry',
          priority: 20, // 优先级高于默认vendor规则（默认优先级10），确保规则命中
          reuseExistingChunk: true,
          chunks: isServer ? 'async' : 'all', // 服务端仅拆分异步引入的sentry依赖，客户端全量拆分
        },
      };
    }

    return config;
  },
};

module.exports = nextConfig;

• priority参数不要设太低：Next.js内置的第三方依赖拆分规则默认优先级为10，设置为20可以保证sentry相关依赖优先命中当前规则，不会被打进通用的vendors chunk中。
• reuseExistingChunk建议设为true：如果sentry依赖已经被其他更高优先级的拆分规则命中，直接复用已有chunk即可，设为false会强制重复打包，增大整体包体积。
• 无特殊需求不要开启服务端chunk拆分：服务端代码直接运行在Node.js环境，拆分独立chunk不会带来加载性能收益，上述配置默认仅在客户端侧全量拆分sentry依赖，服务端仅处理异步引入的部分，兼顾包体积和运行性能。
• 配置完成后执行next build，在构建产物的静态资源列表中就能看到独立生成的sentry chunk文件。

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