Laravel/Vite/Inertiajs n'arrive pas à importer des pages à partir d'un sous-répertoire (dans mon dossier de pages)

Question

Quand je mets la page Register dans le dossier pages, comme ceci :

/pages
   - Register.vue

Ensuite, tout fonctionne bien et la page se charge, mais quand je mets la page Register 页面放入 auth dans le dossier auth comme ceci :

/pages
   /auth
      - Register.vue

Ça ne marche pas, voici l'erreur que je vois lorsque j'ouvre la console :

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

Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas ?

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

Voici mon code app.js :

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

J'ai essayé de changer ${name} en authentification/enregistrement uniquement et cela a fonctionné ? Mais ce n'est pas vraiment une solution.

C'est la méthode que j'appelle pour afficher la page Register :

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

Answer 1

J'ai eu le même problème et je l'ai résolu en le réécrivant selon la documentation d'Inertia.

Je suis sur @inertiajs/react": "^1.0.2" et mon code ressemble à ceci :

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 est une fonctionnalité intégrée vite qui pré-construira tous les composants trouvés dans ce modèle global et les stockera dans un tableau. Vous pouvez ensuite accéder à la page (module) qui doit être restituée à partir de ce tableau et la renvoyer dans la méthode de résolution.

J'espère que cela aide !