After building assets vue files can`t be found

Hello guys.

my app.js file

import './bootstrap';
import {createApp, h} from 'vue';
import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import {ZiggyVue} from 'ziggy-js';
import {createBootstrap} from 'bootstrap-vue-next';
import AppLayout from './Layouts/AppLayout.vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
  progress: {
    color: "blue",
  },
  title: (title) => `${title} - ${appName}`,
  resolve: async (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue', {eager: true});
    let page = pages[`./Pages/${name}.vue`];
    page.default.layout = page.default.layout || AppLayout;
    return page;
  },
  setup({el, App, props, plugin}) {
    return createApp({render: () => h(App, props)})
      .component('Link', Link)
      .component('Head', Head)
      .use(plugin)
      .use(ZiggyVue)
      .use(createBootstrap())
      .mount(el);
  },
});

Vite.config.js

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import Components from 'unplugin-vue-components/vite';
import {BootstrapVueNextResolver} from 'bootstrap-vue-next';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/js/app.js',
        'resources/css/app.scss',
        'resources/js/admin.js',
        'resources/js/user.js',
        'resources/css/user.scss',
      ],
      refresh: true,
    }),
    vue({
      refresh: true,
    }),
    Components({
      resolvers: [BootstrapVueNextResolver()],
    }),
  ],
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
      '@': path.resolve('resources/js'),
      '$': 'jQuery',
    }
  },
  optimizeDeps: {
    include: [
      "vue-google-maps-community-fork",
      "fast-deep-equal",
    ],
    exclude: ['overlayscrollbars'],
  },
});

When i am run npm run dev all works well. However when i am building assets npm run build then error appear Unable to locate file in Vite manifest: resources/js/Pages/Index.vue.

Any ideas what can be wrong there ?

LaryAI

1 year ago

Level 58

The issue you're encountering is related to Vite's handling of dynamic imports and the way it generates the manifest during the build process. When using import.meta.glob, Vite needs to know all the files at build time to include them in the manifest. If a file is missing from the manifest, it usually means Vite couldn't find it during the build process.

Here are a few steps you can take to resolve this issue:

Check File Paths: Ensure that the file paths in your import.meta.glob call are correct and that the files actually exist in the specified directory. The path should be relative to the file where the import.meta.glob is used.
Ensure Eager Loading: You are already using {eager: true} in your import.meta.glob call, which is good. This ensures that all the files are imported at build time. Double-check that all files are being correctly imported.
Vite Configuration: Make sure your Vite configuration is correctly set up to handle Vue files and that there are no issues with the laravel-vite-plugin or any other plugins you are using.
Clear Cache: Sometimes, clearing the cache can help resolve issues with stale data. Try deleting the node_modules and dist directories, then reinstalling dependencies and rebuilding:
```
rm -rf node_modules
rm -rf dist
npm install
npm run build
```
Check for Errors: Look for any errors or warnings during the build process that might give you more information about what's going wrong.
Manifest File: After running npm run build, check the manifest.json file generated by Vite in the dist directory. Ensure that all your Vue components are listed there. If not, there might be an issue with how the files are being imported.
Update Dependencies: Ensure all your dependencies are up to date, especially Vite and related plugins. Sometimes, issues are resolved in newer versions.

If none of these steps resolve the issue, consider creating a minimal reproduction of the problem and sharing it for further assistance. This can help isolate the issue and make it easier to diagnose.

gidaban79

1 year ago

Level 13

I have spotted. My all compiled files are in public/build/asset/ folder.

import './bootstrap';
import {createApp, h} from 'vue';
import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import {ZiggyVue} from 'ziggy-js';
import {createBootstrap} from 'bootstrap-vue-next';
import {resolvePageComponent} from "laravel-vite-plugin/inertia-helpers";

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
  progress: {
    color: "blue",
  },
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({el, App, props, plugin}) {
    return createApp({render: () => h(App, props)})
      .component('Link', Link)
      .component('Head', Head)
      .use(plugin)
      .use(ZiggyVue)
      .use(createBootstrap())
      .mount(el);
  },
});

This set up, proper rendering all assets. However i want to implement layouts. Like default layout and use

defineOptions({
  layout: DifferentLayout,
});

Please or to participate in this conversation.