vite asking for a file the does not exist

i have a very strange issue with vite it's asking for a file does not exist in the manifest.

The error i am getting : Unable to locate file in Vite manifest: resources/js/dev-tools.js. i had a dev-tools.js but no more. i have tried running php artisan optimize:clear but still the same :(

my vite config;

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        {
            name: 'ziggy',
            enforce: 'post',
            handleHotUpdate({server, file}) {
                if (file.includes('/routes/') && file.endsWith('.php')) {
                    exec('php artisan ziggy:generate', (error, stdout) => error === null && console.log(`  > Ziggy routes generated!`))
                }
            }
        },
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        polyfillDynamicImport: false,
        assetsDir: '',
        manifest: true,
        outDir: '../public/assets/',
        rollupOptions: {
            output: {
                manualChunks: undefined
            },
        },
    },
    resolve: {
        alias: {
            '@': '/resources/js'
        },
        extensions: ['.js', '.ts', '.tsx', '.jsx', '.vue'],
    },
});

App.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">

<head>
/* simplified  */
    @googlefonts()
    @vite(['resources/js/app.js'])
    @routes
</head>
<body class="font-sans antialiased text-gray-700 bg-white dark:text-gray-200 dark:bg-[#050505]">
@inertia
<noscript>
    The Website Requires JavaScript to run
</noscript>
</body>
</html>

app.js

import './bootstrap';
import {createApp, h} from 'vue'
import {createInertiaApp} from '@inertiajs/vue3'
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import {Ziggy} from './ziggy'

import '../css/app.css';


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
        return pages[`./Pages/${name}.vue`]
    },
    setup({el, App, props, plugin}) {
        createApp({
            render: () => h(App, props),
            title: title => `${title} | Name`,
        })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el)
    },
})

manifest.json

{
  "resources/js/app.css": {
    "file": "assets/app-e86af02e.css",
    "src": "resources/js/app.css"
  },
  "resources/js/app.js": {
    "css": [
      "assets/app-e86af02e.css"
    ],
    "file": "assets/app-7a0057db.js",
    "isEntry": true,
    "src": "resources/js/app.js"
  }
}

s4muel

2 years ago

Level 50

try searching all your codebase (even the public and cache... folders) for dev-tools.js string, might be forgotten link somewhere?

Please or to participate in this conversation.