SolidJS•3y ago

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

happens in

undefined:12

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

index-b543198f.js

is the line 12 of

undefined

undefined

is also unhelpful.

Alex Lohr

A

Alex Lohr•2/14/23, 6:31 PM

Could you please give a bit more context about your project? Classic template vs. Solid Start? What vite settings? Stale cache maybe?

Bersaelor

B

BersaelorOP•2/15/23, 8:45 AM

@lexlohr of course, and
here's my vite config:

Alex Lohr

A

Alex Lohr•2/15/23, 8:50 AM

Ah, you're using vite's template. I guess the issue is with your deployment. DId you invalidate previous deployments?

Bersaelor

B

BersaelorOP•2/15/23, 8:55 AM

for sure, after every new deploy, I run a cloudfront invalidation with (as part of the github action)

Bersaelor

B

BersaelorOP•2/15/23, 8:55 AM

but the issue mostly happens during development

Bersaelor

B

BersaelorOP•2/15/23, 8:55 AM

I have just "also" seen in happen in the deployed site from time to time

Bersaelor

B

BersaelorOP•2/15/23, 8:57 AM

in development it really happens every time I reload the page

Screenshot_2023-02-15_at_09.56.36.png

Bersaelor

B

BersaelorOP•2/15/23, 8:57 AM

I mean it's mostly annoying, since it distracts from the issues I actually want to look at in the console

Bersaelor

B

BersaelorOP•2/15/23, 8:58 AM

ah, now it says , thats new

Bersaelor

B

BersaelorOP•2/15/23, 8:58 AM

that gives a hint that it's an image thats not available during loading

Bersaelor

B

BersaelorOP•2/15/23, 9:01 AM

if I look into the tab of chrome, I can't find any file (since it's a 404)

Bersaelor

B

BersaelorOP•2/15/23, 9:02 AM

after reloading it's just

undefined:12

undefined:12

again

Screenshot_2023-02-15_at_10.02.19.png

Bersaelor

B

BersaelorOP•2/15/23, 9:04 AM

how would I clean the vite/solidjs cache? is it maybe liking some now outdated files?

Alex Lohr

A

Alex Lohr•2/15/23, 9:05 AM

rm -r node_modules/.vite

Bersaelor

B

BersaelorOP•2/15/23, 9:07 AM

thank you, but unfortunately still the same console output afterwards

Bersaelor

B

BersaelorOP•2/15/23, 9:08 AM

I mean, the site seems to be working fine, it's just the unnecessary red-error spam in the console thats got me curious

Bersaelor

B

BersaelorOP•2/15/23, 9:09 AM

ok, so I did a

- complete hard reload and clear caches in chrome

Bersaelor

B

BersaelorOP•2/15/23, 9:09 AM

now it'sgone

Alex Lohr

A

Alex Lohr•2/15/23, 9:09 AM

Alex Lohr

A

Alex Lohr•2/15/23, 9:10 AM

Doing caching right is one of the hardest things.

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',
      },
    ]
  },
});