Vite only importing some of the files in a folder

Best Answer

Level 102

I have seen this once before. In that case the image files had some extra information for using in an image editor. This made vite not see it as a web image and ignored it. Maybe try re-exporting the ones that aren't working

2 likes

Level 1

Hello, thanks for helping. The thing is, if I select one of the other images manually and remove the wildcard, it is correctly imported. But if I let the wildcard up, only 2, 3 or 4 are imported. If I try to import them one by one, it imports some and ignores some, again. If I put all the names in an array, all the same. I really don't get it.

Level 1

So what I ended up doing for now is creating a npm script "cpimages" : "rm -rf ./public/assets/images; cp -r ./resources/images ./public/assets" that I call when building "build": "npm run cpimages; vite build". My assets are available in my project, but not versionned by Vite. I can't think of anything else... If you guys got an idea please let me know.

Level 102

@JerryBels I'll try recreating it. Also feel free to make a minimal reproducible example and put it on github

1 like

Level 1

@Sinnbeck Yep, sure, here you go https://github.com/JerryBels/vite-image-bug

I added build folder to the versionned stuff so one can witness one image missing from built assets, comparing with resources/images.

One thing I tried is replacing all my images with images from Google and it worked. So I guess it has something to do with my images. I removed all personal metadata from them though.

Level 102

@JerryBels It definitely has something to do with that production image. If I simply resize it, it starts working

Level 1

@Sinnbeck Yes, I got that too, but as I said if I take the current production image and import only this one import.meta.glob('../images/production_icon.png'); it works. Also in other tries multiple images were missing (but I guess that can be because one is faulty then the process stops). Why?

Level 102

@JerryBels Maybe add it to the official issue tracker. I doubt anyone here want to try and debug the source code of vite. https://github.com/vitejs/vite/issues

1 like

Level 1

@Sinnbeck well I did and they already fixed it with 3.2.0-beta.1 - if you're interested at understanding what the issue was, it's when two files are the same but with a different name... https://github.com/vitejs/vite/pull/9928

Level 102

@JerryBels Ah! That makes so much sense :) And awesome to see a laravel community member fix it

1 like

shibbirweb

Level 1

At the first time I also thought that it was a bug from vite. but when I read their documentation I found this is a feature for Vite. If an asset file like (images) whose size is less than 4kb(Default size for vite) is marked as an inline element. and convert it into base64 format so that It loads without sending a request.

So when we use vite with Laravel we have to override this size. So simply we need this configuration.

export default defineConfig({
    build: {
        assetsInlineLimit: "2048", // 2kb, set as your minimum file size
    },
})

Documentation link: https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

3 likes

JackySi