Module has been externalized for browser compatibility error in Vite build

Question

I am currently working on a project that utilizes Vite version 4.3.2 and is integrated with Adobe Experience Manager (AEM) via the aem-vite plugin. The project also includes '@aem-vite/vite-aem-plugin' and '@aem-vite/import-rewriter'.

The issue I'm facing is that the project works fine on the dev server but throws an error when I build for production. The error message I get in the browser console is:

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

The Module "" part doesn't provide clarity on what actual module might be causing this issue.

Here is my entire vite.config.ts file:

    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}`,
        },
      },
    }));

Here is the section of my vite.config.js where I've set up aliases in an attempt to fix this:

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",
},

Despite this, I'm still receiving the same error.

I've already tried upgrading and downgrading the Vite version, but the issue persists. Is there something I'm missing or not understanding here? Any help would be greatly appreciated. Thank you.

Answer 1

Install vite-plugin-node-polyfills:

npm install --save-dev vite-plugin-node-polyfills

or yarn add --dev vite-plugin-node-polyfills

or pnpm add -D vite-plugin-node-polyfills

and add nodePolyfills() to vite.config.ts

import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineConfig({
  plugins: [
    nodePolyfills(),
    ...
  ],
  ...
}

https://www.npmjs.com/package/vite-plugin-node-polyfills