CODEWITHSUNDEEP
laravelproductionviteinertiajs
Rickin Rathatha
Rickin Rathatha

Reputation: 187

Laravel Vite build for production (Inertia) - unknown dynamic import

I am currently trying to create a production build of Laravel / Vite /Inertia, when completing the build (npm run build) I have tried using the bundle but I get the following error:

Uncaught (in promise) Error: Unknown variable dynamic import: ./Pages/Auth/Login.vue

My vite.config.js file has the following:

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

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

        vue(),
    ],
    css: {
        postCss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },
    resolve: {
        alias: {
            '@images': path.resolve('./resources/images'),
        },
    },
    build: {
        chunkSizeWarningLimit: 200,
        rollupOptions: {
            output:{
                manualChunks(id) {
                  if (id.includes('node_modules')) {
                      return id.toString().split('node_modules/')[1].split('/')[0].toString();
                  }
              }
            }
        }
    }
});

My App.js has the following:

import AdminLayout from '@/Layouts/Admin.vue'
import Auth from '@/Layouts/Auth.vue'
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
import { createPinia } from "pinia";

createInertiaApp({
  resolve: async (name) => {
    const page = (await import(`./Pages/${name}.vue`)).default
    if (page.layout === undefined) {
            page.layout = AdminLayout
        }
        else if (page.layout == 'auth') {
            page.layout = Auth
        }
        return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(createPinia())
            .component("Link", Link)
      .mixin({ methods: { route } })
            .mount(el)
  },
})

The vue files sit under:

/resources/js/

and the files that I have are:

file structure

Thanks in advance.

Upvotes: 5

Views: 2643

Answers (1)

Thor
Thor

Reputation: 1243

Jaydeep gave the correct answer above for React and @dlebedef on Laracasts gave it for Vue. In short, replacing the resolve property and value in resources/js/app.js with the following snippet fixed it for me. Formatting will vary depending on how your app.js is setup.

resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")),

Upvotes: 0

Related Questions