Laravel/Vite/Inertiajs nampaknya tidak boleh mengimport halaman daripada subdirektori (dalam folder halaman saya)

Question

Apabila saya meletakkan halaman Register ke dalam folder halaman, seperti ini:

/pages
   - Register.vue

Kemudian semuanya berfungsi dengan baik dan halaman dimuatkan, tetapi apabila saya meletakkan halaman Register 页面放入 auth ke dalam folder auth seperti ini:

/pages
   /auth
      - Register.vue

Ia tidak berfungsi, ini adalah ralat yang saya lihat semasa saya membuka konsol:

dynamic-import-helper:7 Uncaught (in promise) Error: Unknown variable dynamic import: ./pages/auth/Register.vue
    at dynamic-import-helper:7:96
    at new Promise (<anonymous>)
    at default (dynamic-import-helper:6:12)
    at resolve (app.js:5:22)
    at e2.h2 [as resolveComponent] (createInertiaApp.js:8:52)
    at n2.setPage (router.ts:378:33)
    at router.ts:323:19

Adakah sesiapa tahu mengapa ini tidak berfungsi?

Ini kod vite.config.js saya:

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,
        }),
    ],
});

Ini ialah kod app.js saya:

import {createApp, h} from 'vue';
import {createInertiaApp} from "@inertiajs/inertia-vue3";

createInertiaApp({
    resolve: name => import(`./pages/${name}.vue`),
    setup({el, app, props, plugin}) {
        createApp({render: () => h(app, props)})
            .use(plugin)
            .mount(el)
    }
});

Saya cuba menukar ${name} kepada pengesahan/pendaftaran sahaja dan kemudian ia berjaya? Tetapi ini sebenarnya bukan penyelesaian.

Ini adalah kaedah yang saya panggil untuk memaparkan halaman Register:

public function register(): Response|ResponseFactory
{
    return Inertia::render('auth/Register');
}

Answer 1

Saya mengalami masalah yang sama dan saya membetulkannya dengan menulis semula mengikut dokumentasi Inersia.

Saya menggunakan @inertiajs/react": "^1.0.2" dan kod saya kelihatan seperti ini:

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';

const createApp = () =>
  createInertiaApp({
    resolve: (name) => {
      const pages = import.meta.glob('./pages/**/*.tsx', { eager: true });
      const page = pages[`./pages/${name}.tsx`];
      return page;
    },
    setup({ el, App, props }) {
      createRoot(el).render(<App {...props} />);
    },
  });

export default createApp;

import.meta.glob ialah ciri terbina dalam vite yang akan pra-membina semua komponen yang terdapat dalam corak glob ini dan menyimpannya dalam tatasusunan. Anda kemudian boleh mengakses halaman (modul) yang perlu diberikan daripada tatasusunan itu dan mengembalikannya dalam kaedah penyelesaian.

Semoga ia membantu!