Vite::asset not working after running npm build

I've been using the approach of using Vite::asset to load JS or CSS files only needed in certain views, and it works normally while running npm run dev, but after running npm build, whenever I try to open views that are using Vite::asset I receive an error like this example below:

Unable to locate file in Vite manifest: resources/js/sortable.min.js

Any suggestions on how to fix this?

Nakov

2 years ago

Level 73

I guess you are missing this step: https://laravel.com/docs/10.x/vite#blade-processing-static-assets

So you need to make Vite aware of that file in your resources/js/app.js add this:

import.meta.glob([
  '../js/**',
]);

alancgdw

2 years ago

Level 1

@Nakov actually I've already inserted this in app.js:

import "./bootstrap";

import.meta.glob(["../img/**", "../js/**", "../css/**"]);

import Alpine from "alpinejs";

window.Alpine = Alpine;

Alpine.start();

import "flowbite";

import Inputmask from "inputmask";

What I don't understand, but don't actually know if it's related, is why only the images, aside the app CSS and JS, are being built when I run npm build:

> build
> vite build

vite v4.3.9 building for production...
✓ 162 modules transformed.
public/build/manifest.json                   0.53 kB │ gzip:  0.21 kB
public/build/assets/logo-94e9400e.svg        4.11 kB │ gzip:  1.92 kB
public/build/assets/no-image-f0046f08.png    8.53 kB
public/build/assets/app-bb781df9.css        52.09 kB │ gzip:  8.94 kB
public/build/assets/app-a499e095.js        239.36 kB │ gzip: 73.24 kB
✓ built in 16.94s

Nakov

2 years ago

Level 73

Have you tried referencing the file in your vite.config.js file instead, and then using it with @vite directive or Vite::asset in your blade like here: https://stackoverflow.com/a/74738144/1457270

Note the custom js file, you don't need the rest.

alancgdw

2 years ago

Level 1

@Nakov manually listing the files in vite.config.js fixes the error, but isn't there a way to do this more automatically?

Nakov

2 years ago

Level 73

@alancgdw I guess it can be if you add them in a sub folder of the js folder for example /js/libs/ or whatever and then add that in the import in your app.js file, because adding just /js/** will include the app.js file which does not make sense to be referenced from within itself, if it makes sense. I haven't tried it myself, so I don't know much unfortunately.

alancgdw

2 years ago

Level 1

@Nakov I've found a way doing this in vite.config.js:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import * as glob from "glob";
import path from "node:path";
import { fileURLToPath } from "node:url";

const inputJS = Object.fromEntries(
    glob
        .sync("resources/js/*.js")
        .map((file) => [
            path.relative("resources/js", file),
            fileURLToPath(new URL(file, import.meta.url)),
        ])
);
const inputCSS = Object.fromEntries(
    glob
        .sync("resources/css/*.css")
        .map((file) => [
            path.relative("resources/css", file),
            fileURLToPath(new URL(file, import.meta.url)),
        ])
);
const input = {
    ...inputJS,
    ...inputCSS,
};

export default defineConfig({
    plugins: [
        laravel({
            input,
            refresh: true,
        }),
    ],
});

The only problem now is that Vite is adding "exports" in the end of JS files, and I'm not being able to use it in any way

Please or to participate in this conversation.