Vite+AEM生产构建报错：模块因浏览器兼容性被外部化

项目采用 Vite 4.3.2 版本，通过 @aem-vite/vite-aem-plugin 和 @aem-vite/import-rewriter 与Adobe Experience Manager（AEM）集成。开发服务器运行正常，但生产构建后浏览器控制台抛出错误：

Module "" has been externalized for browser compatibility. Cannot access ".custom" in client code.

错误未指明具体触发模块，尝试过配置Node.js核心模块别名（如process: "process/browser"等）、升降Vite版本，问题依旧。

vite.config.ts 完整配置：

export default defineConfig(({ command, mode }) => ({
  plugins: [
    vue(),
    vueJsx(),
    tsconfigPaths(),
    viteForAem({
      contentPaths: [designsName, 'content'],
      publicPath: clientLibsPath,
    }),
    bundlesImportRewriter({
      publicPath: clientLibsPath,
      resourcesPath: 'resources/js',
    }),
    commonjs({
      include: '/node_modules/',
      requireReturnsDefault: 'auto',
      defaultIsModuleExports: 'auto',
    }),
  ],
  optimizeDeps: {
    include: ['qs', 'dayjs'],
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL(clientScriptsPath, import.meta.url)),
      'aem-base': aemBaseClientPath(),
      ...createLibMock('lib/proxyImport', 'proxyImport'),
      ...createLibMock('components/mixins/isMobile', 'isMobile'),
      components: aemBaseClientPath('scripts/components'),
      constants: aemBaseClientPath('scripts/constants'),
      lib: aemBaseClientPath('scripts/lib'),
    },
    dedupe: ['vue'],
  },
  base: command === 'build' ? clientlibsFolderPath : '/',
  root: './',
  build: {
    brotliSize: false,
    manifest: false,
    minify: mode === 'development' ? false : 'esbuild',
    outDir: 'dist',
    sourcemap: command === 'serve' ? 'inline' : false,
    rollupOptions: {
      output: {
        assetFileNames: `${clientlibResourcesPath}/[ext]/[name][extname]`,
        chunkFileNames: `${clientlibResourcesPath}/chunks/[name].[hash].js`,
        entryFileNames: `${clientlibResourcesPath}/js/[name].js`,
      },
      input: {
        bundle: `${clientPath}/scripts/main.ts`,
        styles: `${clientPath}/assets/styles/main.scss`,
      },
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$s-base-resource-path: "${aemBaseResourcePath}";$s-selectiontools-resource-path: "${clientLibsPath}";`,
        quietDeps: true,
      },
    },
    loaderOptions: {
      sass: {
        quietDeps: true,
      },
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
    exclude: [...configDefaults.exclude],
    root: `${clientScriptsPath}/tests`,
    coverage: {
      reporter: ['text', 'json', 'html', 'lcov'],
      reportsDirectory: `${testReportsPath}`,
    },
  },
}));

已尝试的修复配置：

resolve: {
  alias: {
      process: "process/browser",
      buffer: "buffer",
      crypto: "crypto-browserify",
      stream: "stream-browserify",
      assert: "assert",
      http: "stream-http",
      https: "https-browserify",
      os: "os-browserify",
      url: "url",
      util: "util",
  },
}

这个错误本质是Vite/Rollup将某个模块标记为外部依赖，但客户端代码仍尝试访问它的.custom属性。结合AEM集成场景，可按以下步骤定位修复：

1. 精准定位触发错误的模块 #

临时开启生产sourcemap #

修改build配置启用隐藏式sourcemap，构建后查看浏览器错误堆栈，直接定位到出错的文件和代码行：

build: {
  sourcemap: 'hidden' // 替换原有的false
}

检查自定义mock的实现 #

配置中使用了createLibMock生成的别名，需确认：

• mock模块是否正确导出了原模块的.custom属性
• mock是否在生产构建中被正确打包，而非被误标记为外部依赖

2. 调整Rollup外部依赖规则 #

AEM-vite插件可能自动标记部分模块为外部依赖，需显式排除内部模块：
在build.rollupOptions中添加自定义外部依赖判断逻辑：

build: {
  rollupOptions: {
    external: (id) => {
      // 避免自定义mock模块被外部化
      if (id.includes('lib/proxyImport') || id.includes('components/mixins/isMobile')) {
        return false;
      }
      // 保留AEM插件默认的外部化规则
      return viteForAem.external?.(id);
    },
    // 其他原有配置
  }
}

3. 缩小CommonJS插件的处理范围 #

原配置include: '/node_modules/'过于宽泛，可能导致内部模块被错误处理，改为仅处理需要转换的第三方模块：

commonjs({
  include: /node_modules\/(qs|dayjs)/, // 仅列出需要转换的模块
  requireReturnsDefault: 'auto',
  defaultIsModuleExports: 'auto',
})

4. 验证AEM资源路径配置 #

检查bundlesImportRewriter的resourcesPath是否与AEM ClientLibs的实际目录结构匹配：

• 确认resourcesPath: 'resources/js'对应AEM中ClientLibs的资源目录
• 构建后检查dist目录下的文件路径是否符合AEM预期，避免路径解析错误导致模块加载异常

5. 排查ESBuild压缩的影响 #

临时关闭minify验证是否是压缩导致的标识符混淆：

build: {
  minify: false
}

若关闭后错误消失，配置ESBuild保留特定标识符：

build: {
  minify: 'esbuild',
  esbuild: {
    keepNames: true, // 保留类和函数名称
    reservedNames: ['custom'] // 强制保留该标识符不被混淆
  }
}

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