如何修复Vite环境下Uncaught (in promise) ReferenceError: require未定义错误

错误信息 #

Failed to load resource: net::ERR_CONNECTION_REFUSED
vue-i18n.esm-bundler.js:39 You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
initFeatureFlags @ vue-i18n.esm-bundler.js:39
app.js:45 Uncaught (in promise) ReferenceError: require is not defined
at resolve (app.js:45:24)
at m2 (createInertiaApp.js:8:52)
at exports.createInertiaApp (createInertiaApp.js:12:24)
at app.js:43:1
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

错误截图：

相关代码（resources/js/app.js） #

import "./bootstrap";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

/* FontAwesome */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import "@/Sources/icons";

/* Multi-language */
import { createI18n } from "vue-i18n";
import generalLangBg from "@/Lang/bg/general_lang_bg";
import generalLangDe from "@/Lang/de/general_lang_de";
import generalLangEn from "@/Lang/en/general_lang_en";
import generalLangFr from "@/Lang/fr/general_lang_fr";
import generalLangRu from "@/Lang/ru/general_lang_ru";
import generalLangTr from "@/Lang/tr/general_lang_tr";
import generalLangZh from "@/Lang/zh/general_lang_zh";

const i18n = createI18n({
    legacy: false,
    locale: "en",
    fallbackLocale: "en",
    fallbackRoot: "en",
    messages: {
        bg: generalLangBg,
        de: generalLangDe,
        en: generalLangEn,
        fr: generalLangFr,
        ru: generalLangRu,
        tr: generalLangTr,
        zh: generalLangZh,
    },
});

/* Highlighter */
import VueHighlightJS from 'vue3-highlightjs'

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18n)
            .use(VueHighlightJS)
            .component("icon", FontAwesomeIcon)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

解决方案 #

1. 修复require is not defined错误 #

Vite基于ES模块规范，不支持CommonJS的require语法，需将Inertia的resolve方法改为动态import：

// 替换原resolve行
resolve: (name) => import(`./Pages/${name}.vue`),

2. 处理vue-i18n的提示警告 #

在项目根目录的vite.config.js中添加define配置，明确设置vue-i18n的特性标志：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // 添加以下配置
    define: {
        __VUE_I18N_FULL_INSTALL__: true,
        __VUE_I18N_LEGACY_API__: false,
        __INTLIFY_PROD_DEVTOOLS__: false,
    },
});

3. 解决ERR_CONNECTION_REFUSED错误 #

• 确保Vite开发服务已启动：运行npm run dev或pnpm dev
• 若端口被占用，可在vite.config.js中自定义端口：

export default defineConfig({
    // ...其他配置
    server: {
        port: 5174, // 替换为未被占用的端口
    },
});

内容的提问来源于stack exchange，提问作者Dev Related Cube