Laravel Jetstream安装Inertia报import.meta直接访问不支持错误

该问题由前端构建工具配置冲突导致：新版本搭载Inertia栈的Laravel Jetstream默认使用Vite作为前端构建工具，但当前项目残留了旧版Laravel Mix（Webpack封装）的配置，两套体系完全不兼容，触发两个核心异常：

• Blade模板中使用的@vite()是Vite专属的资源加载指令，Laravel Mix无法识别解析，会直接将原始指令文本输出到页面，因此浏览器仅显示@vite('resources/js/app.js')，无法正常加载JS/CSS资源渲染视图。
• 项目入口JS文件使用了Vite专属的import.meta.glob语法、laravel-vite-plugin提供的页面解析方法，Webpack/Mix不支持该类import.meta用法，因此编译时抛出Critical dependency警告。

注：你执行安装时命令存在拼写错误，正确命令为laravel new projectName --jet，该笔误不是本次异常的诱因。

可根据使用习惯二选一，优先选择方案一匹配Jetstream官方默认配置，后续维护成本更低。

方案一：切换为官方默认Vite配置（推荐） #

• 删除项目根目录下所有Mix相关配置文件，包括webpack.mix.js（你贴出的webpack.config.js为Mix配置文件，一并删除）、已生成的mix-manifest.json文件。
• 调整依赖，移除无用的Mix包，安装Vite相关依赖：

npm remove laravel-mix
npm install --save-dev laravel-vite-plugin vite

• 在项目根目录新建Vite配置文件vite.config.js，写入如下配置：

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

• 修改package.json中的scripts字段，替换为Vite对应的构建命令：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

• 确认resources/views/app.blade.php根模板中保留@vite('resources/js/app.js')指令，没有混入Mix版本的mix()资源加载代码。
• 重新安装依赖并启动构建服务：

npm install
npm run dev

同步启动Laravel本地服务后访问即可正常渲染登录、注册及默认布局页面。

方案二：保留Laravel Mix，适配Inertia配置 #

如果需要继续使用Laravel Mix，可将所有Vite专属语法、依赖替换为Mix兼容版本：

• 移除Vite相关依赖：

npm remove @vitejs/plugin-vue laravel-vite-plugin vite

• 修改resources/js/app.js，删除Vite专属的resolvePageComponent引入，替换为Mix兼容的页面解析逻辑，移除import.meta.glob用法：

import "./bootstrap";
import "../css/app.css";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

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(ZiggyVue, Ziggy)
            .mount(el);
    },
});

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

• 修改根目录下的webpack.mix.js配置，开启Vue支持、配置TailwindCSS及资源版本号：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .version();

• 将根模板resources/views/app.blade.php中的@vite()指令替换为Mix兼容的资源加载代码：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}" defer></script>

• 重新安装依赖并执行构建：

npm install
npm run dev

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