Level 75
Is your PHP and laravel versions the required versions, just something to double check.
Edit:
Totally not related but you may find this of interest: https://laracasts.com/discuss/channels/general-discussion/stackoverflow-technology-survey
Oct 27, 2023
8
Level 15
Inertia Warning: Accessing import.meta directly is unsupported
Can anyone help me please with my Inertia install? In fact I have two Inertia problems. Let's focus on the first one above, as it might be inked to the second one: Undefined variable $page.
I am installing Inertia.js and Vue 3 into a current L10 application. Up until now that app has been only been using Laravel/blade with Javascript. I want to use Vue and Inertia to build new pages going forward where I previously had been using JS. I have done this with a different application, which works well.
I use mix NOT vite. Vite has a conflict with the Bootstrap framework. I'm using PHP 8.1. I have followed Jeffrey's install tutorial to the letter, however, I did use the current Inertia install statements rather than the older one's in @jeffreyway tutorial. HIs tut is a bit out of date. When I run npx mix everything compiles nicely but I get this warning:
WARNING in ./resources/js/bootstrap.js 17:16-27
Critical dependency: Accessing import.meta directly is unsupported (only property access is supported)
Here is the resources/js/bootstrap.js the warning refers to. It was taken straight off the inertia website, however it differs from Jeffrey's tut.:
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Despite everything compiling properly, when I attempt to login to my application I now get this error:
Undefined variable $page
And the error exception page highlights the Inertia recommended directive : @inertiaHead. **NOTE: However, if I REMOVE @inertiaHead and @inertia I can login to my laravel page as normal. **
This does not make sense to me. I updated the ServiceProvider to.
public function boot()
{
Inertia::setRootView('layouts.app'); // <<<<< ADDED
}
And my App finds the layouts.app. This was recommended here: https://laracasts.com/discuss/channels/laravel/getting-inertia-to-use-a-different-app-file
Level 15
@jlrdw thanks for that. I checked and Medium states PHP 8.1 or better. I have 8.1.
Level 8
Dude don't do it, if you have a Laravel app, and have everything set up like such and then try install InertiaJS after, its gonna create a catastrophy. Inertia in Monolithic, researching the meaning on monolithic, a single great stone often in the form of an obelisk or column. This kinda tells me that you should just start from the beginning and take everything from the old app into the new one.
Level 15
@Randy_Johnson Do you mean create a clean L10 app, then install Inertia + Vue, then manually copy and paste my Laravel blade views, controllers, models etc into the new system?? I can do that.
Curious. about 2 years ago I installed inertia + Vue 3 into a L8 system which was already working and things went well.
Level 102
It sounds like two unrelated problems. One is Javascript and the other php. Let's start by focusing on the php error.
Can you show the full error? Perhaps an image? You can upload to imgur
And can you share the layout file code? The one that gives the error
Level 15
Here you go, here is the app.blade file which is principal layout file for my whole system. Take note, if I remove the @inertiaHead and @inertia directives, then my system operates as normal. If they are present then I get the errors. I will send the image through in a few minutes,
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{!! csrf_token() !!}">
{{Html::style('css/app.css')}}
{{-- <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">--}}
<link href = "{{mix('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ mix('/js/app.js') }}" defer></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
<script>
window.Laravel = {{ json_encode([
'csrfToken' => csrf_token(),
]) }};
</script>
@inertiaHead
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div style="word-spacing:-3px;" class="col-md-3 col-md-offset-1">
<span style="color: #7b7777;font-family:Raleway, Arial, sans-serif !important; font-weight:700;font-size:35px">Contrax</span>
<span style="font-size:35px; color:#f9a305;font-weight: bold;font-family:Raleway, Arial, sans-serif !important;">IQ</span>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/source/app.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#383b75"
},
"button": {
"background": "#f1d600"
}
},
"position": "top",
"static": true,
"showLink": false,
"content": {
"message": "This website requires the use of cookies. Without cookies, the website will not function effectively. We do not share any data with third parties. "
}
});
</script>
@inertia
</body>
</html>
Level 15
@sinnbeck here is the screen shot of the error.
Level 15
I found a solution to the problem. The code given in the Inertia tutorial for app.js is designed for Vite. I believe this is not made sufficiently clear in the documents. The code you need for app.js for a MIX implementation is below. I hope this helps someone else.
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
const app = document.getElementById('app')
if (app) {
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({el, App, props, plugin}) {
createApp({render: () => h(App, props)})
.use(plugin)
.mount(el)
},
})
}
1 like
Please or to participate in this conversation.