CODEWITHSUNDEEP
laravelinertiajslaravel-9laravel-jetstreamlaravel-mix-vue3
Manuel Alzate
Manuel Alzate

Reputation: 21

Laravel Jetstream: Critical dependency: Accessing import.meta directly is unsupported (only property access is supported)

I am facing this critical error while installing Laravel Inertia with Jetstream.

larevel new projectName --jet

Then I get this:

WARNING in ./resources/js/app.js 16:65-76 Critical dependency: Accessing import.meta directly is unsupported (only property access is supported) webpack compiled with 1 warning

When I run the project, i can see only @vite('resources/js/app.js') in the browser[1]: https://i.sstatic.net/WjQct.png

resources/js/app.js

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

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
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) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        ),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

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

package.json

 {
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^2.3.3",
        "autoprefixer": "^10.4.7",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vue": "^3.2.31"
    }
}

webpack.config.js

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

I can't see the default Laravel layout view or the login/register views.

Upvotes: 2

Views: 5298

Answers (2)

Simba
Simba

Reputation: 105

Sir, if you have PHP version < 8 and Laravel version < 9 then update the PHP version to 8 and Laravel version to 9. It will fix your problem.

To check Laravel verion run: php artisan --version

To check PHP version run: php --version

Please check Support Policy of laravel on official site.

Upvotes: 2

arianlars
arianlars

Reputation: 9

Try to install laravel-vite-plugin:

First of install the laravel-vite plugin just using this command.

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-vue

Then you need to execute the following command.

npm install
  
npm run dev
php artisan migrate

and Now, your error must be solved

Upvotes: 0

Related Questions