Uncaught (in promise) TypeError: can't access property "default", g2 is undefined Inertiajs 1.0.0

[trevorpan]

Hi,

I have a "laravel/framework": "^9.48.0", app using Vite, Jetstream.

When upgrading to inertiajs 1.0.0 I receive this error in the console.

//app.js
import "./bootstrap";

// Import modules...
import { createSSRApp, h } from "vue";
import.meta.glob(["../images/**", "../fonts/**"]);

import { createInertiaApp } from "@inertiajs/vue3";
import VueMeta from "vue-meta";

// Components
import Welcome from "./Pages/Welcome/Welcome.vue";
import Layout from "./Shared/Layout.vue";
import { MediaLibraryAttachment } from "../../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "../../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-collection";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
    return pages[`./Pages/${name}.vue`];
  },

  setup({ el, App, props, plugin }) {
    createSSRApp({
      render: () => h(App, props),
      components: {
        MediaLibraryAttachment,
        MediaLibraryCollection,
        Welcome,
        VueMeta,
      },
    })
      .use(plugin)
      .mount(el);
  },

  title: (title) =>
    title ? `${title} - Site Title` : "Site Title",

  progress: {
    color: "#4B5563",
    showSpinner: true,
  },
});

The error occurs on line 16 which is this createInertiaApp({... I really don't know what to do. g2 seems to be related to jquery, but I don't reference jquery. There's just nothing else that I can find to see why this is rendering a white page.

any ideas?

here's a console.log of createInertiaApp

Promise { <state>: "pending" }
​
<state>: "rejected"
​
<reason>: TypeError: can't access property "default", g2 is undefined
​​
columnNumber: 161
​​
fileName: "http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=44353a1e"
​​
lineNumber: 6113
​​
message: `can't access property "default", g2 is undefined`
​​
stack: "I/r/<@http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=44353a1e:6113:161\npromise callback*r@http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=44353a1e:6113:148\nI@http://[::1]:5173/node_modules/.vite/deps/@inertiajs_vue3.js?v=44353a1e:6113:198\n@http://[::1]:5173/resources/js/app.js:16:28\n"
​​
<prototype>: TypeError.prototype { stack: "", … }
​​​
constructor: function TypeError()
​​​
message: ""
​​​
name: "TypeError"
​​​
stack: ""
​​​
<prototype>: Error.prototype { stack: "", … }
​
<prototype>: Promise.prototype { … }
​​
catch: function catch()
​​
constructor: function Promise()
​​
finally: function finally()
​​
then: function then()
​​
Symbol(Symbol.toStringTag): "Promise"
​​
<prototype>: Object { … }
​​​
__defineGetter__: function __defineGetter__()
​​​
__defineSetter__: function __defineSetter__()
​​​
__lookupGetter__: function __lookupGetter__()
​​​
__lookupSetter__: function __lookupSetter__()
​​​
__proto__: 
​​​
constructor: function Object()
​​​
hasOwnProperty: function hasOwnProperty()
​​​
isPrototypeOf: function isPrototypeOf()
​​​
propertyIsEnumerable: function propertyIsEnumerable()
​​​
toLocaleString: function toLocaleString()
​​​
toString: function toString()
​​​
valueOf: function valueOf()
​​​
<get __proto__()>: function __proto__()
​​​
<set __proto__()>: function __proto__()

[trevorpan]

// line 6113 of node_modules/.vite/deps/@inertiajs_vue3.js

let m2 = typeof window > "u", d = m2 ? null : document.getElementById(e), h3 = p || JSON.parse(d.dataset.page), r = (f) => Promise.resolve(o(f)).then((g2) => g2.default || g2), i = [], s = await r(h3.component).then((f) => n({ el: d, App: $2, props: { initialPage: h3, initialComponent: f, resolveComponent: r, titleCallback: l, onHeadUpdate: m2 ? (g2) => i = g2 : null }, plugin: E }));
  if (!m2 && t && ee(t), m2) {

[eliaya]

Same issue here +1
when build it in dev stage(npm run dev) ,everything was fine.But while building in production stage(npm run build),the error ran out as below message:

TypeError: can't access property "stations", this is undefined

Here was my code of the VueJS function

function onChange(event) {
    //console.log(this.station = event.target.value)
    const header = {
        'Content-Type': 'application/json',
    }
    const data = {
        group: form.group,
    }
    axios.post(route('select-group'), data, {
        headers: header
    })
        .then((response) => {
            this.stations = response.data;
            console.log(this.stations);
        })
        .catch((error) => {
            console.log(error)
        })

}

[RobertBoes]

The issue you're seeing is not Inertia related, but rather how you're using Vue. It looks like you're mixing the Vue options API and composition API. With composition API you don't have access to this, instead you'd define a ref, of which you change the value.

[eliaya]

Thank you for your reminder you saved my life!! after little modified it's working now!