Laravel 10 + Vue + Inertia not rendering

I think inertia is not working shows below error. Please help me.

createInertiaApp.js:8 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')
    at createInertiaApp.js:8:82

const resolveComponent = name => Promise.resolve(resolve(name)).then(module => module.default || module)

Jack06

3 years ago

Level 1

more details above

-----package.json-------

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@inertiajs/vue3": "^1.0.2",
        "@vitejs/plugin-vue": "^4.1.0",
        "vue": "^3.2.36",
        "vue-loader": "^17.0.1"
    }
}

------app.js-----

import './bootstrap';
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)
  },
})

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

------ app.blade.php -----

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>


and finally below is the page view source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script type="module" src="http://[::1]:5174/@vite/client"></script><script type="module" src="http://[::1]:5174/resources/js/app.js"></script>      </head>
  <body>
    <div id="app" data-page="{&quot;component&quot;:&quot;app&quot;,&quot;props&quot;:{&quot;errors&quot;:{}},&quot;url&quot;:&quot;\/&quot;,&quot;version&quot;:&quot;&quot;}"></div>  </body>
</html>

kindly please help me

Jack06

3 years ago

Best Answer

Level 1

Its working fine. I tried with resolvePageComponent from Inertia helpers

 import { createApp, h } from 'vue';
import { InertiaProgress } from '@inertiajs/progress';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

InertiaProgress.init()
 
createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

laravel_ninja

3 years ago

Level 4

Hi Can I ask a question how I can center inertia progress bar in laravel vue and inertia application

Please or to participate in this conversation.