Vite-React容器部署Nginx时出现Uncaught ReferenceError问题

错误现象 #

生产模式构建并部署后页面空白，控制台报错：

Uncaught ReferenceError: arguments is not defined
    at index-88887ec7.js:3920:212911
    at index-88887ec7.js:1:26
    at index-88887ec7.js:5196:49799

编译后对应代码片段：

});
    var _createClass$5 = function() {
        function _e(et, tt) {
            for (var rt = 0; rt < tt.length; rt++) {
                var nt = tt[rt];
                nt.enumerable = nt.enumerable || !1,
                nt.configurable = !0,
                "value"in nt && (nt.writable = !0),
                Object.defineProperty(et, nt.key, nt)
            }
        }
        return function(et, tt, rt) {
            return tt && _e(et.prototype, tt),
            rt && _e(et, rt),
            et
        }
    }()
      , _arguments = arguments
      , _react$8 = reactExports
      , _react2$8 = _interopRequireDefault$p(_react$8)
      , _propTypes$8 = propTypesExports
      , _propTypes2$8 = _interopRequireDefault$p(_propTypes$8);
    function _interopRequireDefault$p(_e) {
        return _e && _e.__esModule ? _e : {
            default: _e
        }
    }

本地使用vite preview启动服务时一切正常，仅生产部署后出现问题。

相关配置 #

Vite配置（vite.config.js） #

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import viteTsconfigPaths from 'vite-tsconfig-paths';

export default ({ mode }) => {
    const env = loadEnv(mode, process.cwd(), ['VITE_']);
    return defineConfig({
        define: {
            'process.env': env,
        },
        resolve: {
            alias: {
                '@': 'src',
            },
        },
        build: {
            outDir: 'build',
        },
        server: {
            open: true,
        },
        css: {
            preprocessorOptions: {
                scss: {
                    quietDeps: true,
                },
            },
        },
        plugins: [react(), svgr({ svgrOptions: { icon: true } }), viteTsconfigPaths()],
    });
};

Dockerfile #

FROM node:20.10.0 as builder

ARG ENVIRONMENT
ARG SERVER_NAME
ARG BACKEND_URL

ARG VITE_APP_VERSION

COPY . ./

RUN cp .env.$ENVIRONMENT .env

RUN apt -y update && apt -y install gettext-base
RUN envsubst "\$SERVER_NAME \$BACKEND_URL" < nginx.conf.template > nginx.conf

RUN npm install -g pnpm
RUN pnpm install
RUN pnpm build

FROM nginx

EXPOSE 80

COPY --from=builder nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /build/ /usr/share/nginx/html/

解决方案 #

问题根源在Vite配置的define选项：直接将env对象赋值给process.env，生产构建时静态替换会导致代码顶层作用域出现非法的arguments引用（ES模块顶层作用域中arguments未定义）。

修改Vite配置，将process.env的每个属性单独定义：

export default ({ mode }) => {
    const env = loadEnv(mode, process.cwd(), ['VITE_']);
    const defineEnv = {};
    Object.keys(env).forEach(key => {
        defineEnv[`process.env.${key}`] = JSON.stringify(env[key]);
    });
    return defineConfig({
        define: defineEnv,
        // 保留其他原有配置
        resolve: {
            alias: {
                '@': 'src',
            },
        },
        build: {
            outDir: 'build',
        },
        server: {
            open: true,
        },
        css: {
            preprocessorOptions: {
                scss: {
                    quietDeps: true,
                },
            },
        },
        plugins: [react(), svgr({ svgrOptions: { icon: true } }), viteTsconfigPaths()],
    });
};

或者更简洁的方式：移除define中的process.env配置，直接在代码中使用Vite原生支持的import.meta.env.VITE_XXX获取环境变量，也能彻底避免该问题。

修改后重新构建部署，页面即可正常加载。

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