Error when importing a component / layout

@Sinnbeck

Vite config

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.scss',
            'resources/js/app.js',
        ]),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directly as expected.
                    includeAbsolute: false,
                },
            },
        }),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
});

Absolute path to the Layout file

/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/resources/js/Layout.vue

@vincent15000 first try

import Layout from '../Layout'

@Sinnbeck I have already tried this too ... The error message shows an arrow pointing on the first character inside the brackets, ie the first dot.

import Layout from './Layout'
                    ^
...
import Layout from '../Layout'
                    ^

@vincent15000 can you show the exact error?

@Sinnbeck Here it is.

[plugin:vite:import-analysis] Failed to resolve import "../Layout" from "resources/js/Pages/AboutComponent.vue". Does the file exist?
/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/resources/js/Pages/AboutComponent.vue:3:23
1  |  /* unplugin-vue-components disabled */
2  |  
3  |    import Layout from '../Layout'
   |                        ^
4  |  
5  |  	const _sfc_main = {
    at formatError (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39080:46)
    at TransformContext.error (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39076:19)
    at normalizeUrl (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:58354:26)
    at async TransformContext.transform (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:58503:57)
    at async Object.transform (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39317:30)
    at async doTransform (/home/vincent/Documents/PRO/DEVELOPPEMENT/mentoring/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:50037:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

@Sinnbeck And here is the JS to create the inertia app.

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) })
      .component("font-awesome-icon", FontAwesomeIcon)
      .mount(el)
  },
});

@vincent15000 maybe a vue thing. Try

import Layout from '../Layout.vue'

@Sinnbeck That works with the .vue extension. In the documentation it's not showed with the extension. What does this mean ? Why this error without the extension ? I thought that the extension was automatically detected.

@vincent15000 which guide? Perhaps it uses mix which might pick it up automatically (pretty sure it goes does)

@Sinnbeck I just followed the InertiaJS documentation.

https://inertiajs.com/pages

@vincent15000 yeah that assumes mix for now. I know they plan to update it soon

@Sinnbeck Thank you ;).

@Sinnbeck What should I do, while using VITE package

@dev-mike I suggest making your own thread explaining your exact problem :)