Weird 404 errors in `undefined:12`

Recently, I have been getting a lot of errors like:
GET http://localhost:3000/assets/index-b543198f.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:3000/assets/index-b543198f.js net::ERR_ABORTED 404 (Not Found)
in the console. Both in localhost as well as on the built&deployed site. it says this 404 happens in undefined:12. I'm a little stumped, because my site works fine, nothing seems to be missing. I don't know what index-b543198f.js is the line 12 of undefined is also unhelpful.
11 Replies
Alex Lohr
Alex Lohr2y ago
Could you please give a bit more context about your project? Classic template vs. Solid Start? What vite settings? Stale cache maybe?
Bersaelor
Bersaelor2y ago
@lexlohr of course, vite-template-solid and here's my vite config:
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import suidPlugin from "@suid/vite-plugin";
import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
server: {
port: 3000,
proxy: {
"/api": {
target: "https://host.com",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, "/api"),
},
"/images": {
target: "https://host.com",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/images/, "/images"),
},
},
},
build: {
target: 'esnext',
},
resolve: { // To fix aws-sdk and Vite failing to build on AWS Amplify
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser',
},
]
},
});
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import suidPlugin from "@suid/vite-plugin";
import solidSvg from 'vite-plugin-solid-svg'

export default defineConfig({
plugins: [suidPlugin(), solidPlugin(), solidSvg({ defaultAsComponent: false })],
server: {
port: 3000,
proxy: {
"/api": {
target: "https://host.com",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, "/api"),
},
"/images": {
target: "https://host.com",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/images/, "/images"),
},
},
},
build: {
target: 'esnext',
},
resolve: { // To fix aws-sdk and Vite failing to build on AWS Amplify
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser',
},
]
},
});
Alex Lohr
Alex Lohr2y ago
Ah, you're using vite's template. I guess the issue is with your deployment. DId you invalidate previous deployments?
Bersaelor
Bersaelor2y ago
for sure, after every new deploy, I run a cloudfront invalidation with /* (as part of the github action) but the issue mostly happens during development I have just "also" seen in happen in the deployed site from time to time
Bersaelor
Bersaelor2y ago
in development it really happens every time I reload the page
Bersaelor
Bersaelor2y ago
I mean it's mostly annoying, since it distracts from the issues I actually want to look at in the console ah, now it says images/undefined, thats new that gives a hint that it's an image thats not available during loading if I look into the Sources tab of chrome, I can't find any assets/index-....css file (since it's a 404)
Bersaelor
Bersaelor2y ago
after reloading it's just undefined:12 again
Bersaelor
Bersaelor2y ago
how would I clean the vite/solidjs cache? is it maybe liking some now outdated files?
Alex Lohr
Alex Lohr2y ago
rm -r node_modules/.vite
Bersaelor
Bersaelor2y ago
thank you, but unfortunately still the same console output afterwards I mean, the site seems to be working fine, it's just the unnecessary red-error spam in the console thats got me curious ok, so I did a rm -rf node_modules + yarn install + complete hard reload and clear caches in chrome now it'sgone
Alex Lohr
Alex Lohr2y ago
👍 Doing caching right is one of the hardest things.