[Bug] 项目打包后出现 ReferenceError: require is not defined

[WP-Jorge]

What did I do

main.ts: nodeIntegration: true, contextIsolation: true

在 vue-router 中使用路由懒加载 router/index.ts: { path: '/recommend', name: 'Recommend', component: () => import('@/pages/discovery/Recommend/index.vue') }

执行打包： pnpm build

What happened

打包完成后打开 app，报错：ReferenceError: require is not defined

通过错误提示发现，import() 被转译成 require()：

由于开启了上下文隔离：contextIsolation: true，在渲染进程中不能使用 node api，导致报错

Expected

如何避免将 import() 转译成 require()？ 在未使用 vite-plugin-electron 时，打包正常：

Environment

• OS: OS version, e.g. Window 10
• vite-plugin-electron version (or commit hash), e.g. ^0.4.9

More detail

More detail like screenshot

[WP-Jorge]

已解决，vite-plugin-electron 默认使用 cjs 打包，在vite.config.js 中添加build: { rollupOptions: { output: { format: 'es' } } }解决

[fchretienow]

Hi @WP-Jorge where did you add this exactly? Here's my full config, but still having this error:

import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import vue from '@vitejs/plugin-vue';
import { rmSync } from 'node:fs';
import { dirname, resolve } from 'node:path';
import rollupNodePolyFill from 'rollup-plugin-polyfill-node';
import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron';
import renderer from 'vite-plugin-electron-renderer';
import { notBundle } from 'vite-plugin-electron/plugin';
import eslintPlugin from 'vite-plugin-eslint';
import svgLoader from 'vite-svg-loader';
import pkg from './package.json';

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  rmSync('dist-electron', { recursive: true, force: true });

  const isServe = command === 'serve';
  const isBuild = command === 'build';
  const sourcemap = isServe || !!process.env.VSCODE_DEBUG;

  return {
    build: {
      rollupOptions: {
          output: { format: 'es' },
      },
    },
    plugins: [
      vue(),
      svgLoader({
        defaultImport: 'component',
      }),
      VueI18nPlugin({
        include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/**.json'),
      }),
      eslintPlugin({
        exclude: ['node_modules'],
      }),
      electron([
        {
          // Main process entry file of the Electron App.
          entry: 'electron/main/index.ts',
          onstart({ startup }) {
            if (process.env.VSCODE_DEBUG) {
              console.log(/* For `.vscode/.debug.script.mjs` */ '[startup] Electron App');
            } else {
              startup();
            }
          },
          vite: {
            build: {
              sourcemap,
              minify: isBuild,
              outDir: 'dist-electron/main',
              rollupOptions: {
                output: { format: 'es' },
                // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons,
                // we can use `external` to exclude them to ensure they work correctly.
                // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built.
                // Of course, this is not absolute, just this way is relatively simple. :)
                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
              },
            },
            plugins: [
              rollupNodePolyFill(),
              // This is just an option to improve build performance, it's non-deterministic!
              // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')`
              isServe && notBundle(),
            ],
          },
        },
        {
          entry: 'electron/preload/preload.ts',
          onstart({ reload }) {
            // Notify the Renderer process to reload the page when the Preload scripts build is complete,
            // instead of restarting the entire Electron App.
            reload();
          },
          vite: {
            build: {
              sourcemap: sourcemap ? 'inline' : undefined, // #332
              minify: isBuild,
              outDir: 'dist-electron/preload',
              rollupOptions: {
                output: { format: 'es' },
                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
              },
            },
            plugins: [
              rollupNodePolyFill(),
              // This is just an option to improve build performance, it's non-deterministic!
              // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')`
              isServe && notBundle(),
            ],
          },
        },
      ]),
      // Use Node.js API in the Renderer process
      renderer(),
    ],
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: 'globalThis',
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: false,
          }),
          NodeModulesPolyfillPlugin(),
        ],
      },
    },
    publicDir: 'public',
    resolve: {
      alias: {
        '@': resolve(dirname(fileURLToPath(import.meta.url)), './src'),
        '~': resolve(dirname(fileURLToPath(import.meta.url)), './node_modules'),
      },
    },
    server:
      process.env.VSCODE_DEBUG &&
      (() => {
        const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL);
        return {
          host: url.hostname,
          port: +url.port,
        };
      })(),
    clearScreen: false,
  };
});