How can I fix Uncaught (in promise) ReferenceError: require is not defined with Vite?

Question

I downloaded this template locally ( https://github.com/sinan-aydogan/tailadmin-laravel ) and then uploaded it on Bitbucket to be converted from Mix to Vite using Laravel Shift. However, when I ran it, I got the following.

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

Please see the screenshot for a better view of the error:

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" });

Answer 1

There should never be require in source code when using Vite. It's ESM only.

edit your app.js to import.vue files

createInertiaApp({
    resolve: (name) => import(`./Pages/${name}.vue`),
    setup(...
    

Answer 2

Vite version coming soon, it'll be a composer package.