Vite build后运行vite preview报process is not defined错误

• 执行vite build完成生产构建后，运行vite preview预览构建产物时，控制台抛出Uncaught (in promise) ReferenceError: process is not defined报错
• 本地执行npm start启动开发服务时无该报错
• 报错截图：
  
• 开发环境正常运行截图：
  
• 现有vite.config.js配置：

import {defineConfig} from 'vite';
import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill';
// ...
export default defineConfig({
  // ...
  build: {
    sourcemap: true,
    emptyOutDir: false
  },
  server: {
    host: true
  },
  define: {
    'process.env': {}
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis'
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true
        })
      ]
    }
  }
});

1. 配置中optimizeDeps下的esbuild规则、polyfill插件仅对开发环境的依赖预构建流程生效，生产构建走rollup打包链路时不会应用这部分配置，现有配置没有给生产构建流程配置对应的Node变量polyfill
2. define字段仅声明了process.env，没有定义全局process对象，当代码（含第三方依赖）访问process.version、process.browser等env之外的属性时，就会触发未定义错误
3. 引入的NodeGlobalsPolyfillPlugin没有开启process选项的polyfill注入，本身就缺失process相关的兼容逻辑
4. 开发环境不报错是因为Vite dev server内置了一层临时的Node变量shim，生产构建为了控制包体积，不会自动注入这层兼容。

二选一即可，优先选方案2，配置更简单兼容性更好。

方案1：补全现有配置的polyfill逻辑 #

1. 先安装缺失的依赖：

npm i -D process rollup-plugin-polyfill-node @esbuild-plugins/node-modules-polyfill

2. 修改vite.config.js，补全生产构建的polyfill配置、全局process定义：

import { defineConfig } from 'vite';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import rollupNodePolyFill from 'rollup-plugin-polyfill-node';

export default defineConfig({
  // 保留原有其他配置
  build: {
    sourcemap: true,
    emptyOutDir: false,
    rollupOptions: {
      plugins: [rollupNodePolyFill()]
    }
  },
  server: {
    host: true
  },
  resolve: {
    alias: {
      process: 'process/browser'
    }
  },
  define: {
    global: 'globalThis',
    'process.env': {},
    'process.version': '"v16.0.0"'
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
          process: true
        }),
        NodeModulesPolyfillPlugin()
      ]
    }
  }
});

方案2：使用Vite专属Node polyfill插件（推荐） #

不用手动对齐esbuild和rollup的polyfill配置，插件会自动处理开发、生产双环境的兼容逻辑：

1. 安装依赖：

npm i -D vite-plugin-node-polyfills

2. 精简原有配置，移除之前手写的optimizeDeps下的polyfill插件、define里的process/global相关定义，替换为插件配置：

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

export default defineConfig({
  plugins: [
    // 保留原有其他Vite插件
    nodePolyfills({
      include: ['buffer', 'process'] // 按需开启需要的Node内置模块polyfill
    })
  ],
  build: {
    sourcemap: true,
    emptyOutDir: false
  },
  server: {
    host: true
  }
});

• 修改配置后先删除node_modules/.vite缓存目录，避免旧的预构建缓存干扰结果
• 重新执行vite build，构建完成后运行vite preview验证
• 如果仍有报错，打开sourcemap定位报错位置，确认代码访问了process的哪个属性，在define字段补全对应声明即可。

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