SSR enable weird error

[ricardopacheco]

I built a monolithic application (create new rails with default options) using vite-ruby and inertiajs. Everything is working fine so far, except the asset issue when using SSR.

• sourceCodeDir is in frontend (same path on app,config);
• I have a file in path sourceCodeDir/templates/default/dist/assets/media/avatars/300-1.png (The file exists and is called correctly)
• In my procfile.dev

frontend: bin/vite dev
ssr: bin/vite build --ssr && bin/vite ssr

When I start procfile, everything looks ok...

frontend   |   VITE v5.3.4  ready in 342 ms
frontend   |
frontend   |   ➜  Local:   http://localhost:3036/vite-dev/
frontend   |   ➜  press h + enter to show help

ssr        | Building with Vite ⚡️
ssr        | yarn run v1.22.21
ssr        | $ /Users/user/projects/experiments/new_rails_app/node_modules/.bin/vite build --ssr --mode development
ssr        | vite v5.3.4 building SSR bundle for development...
ssr        | transforming...
ssr        | ✓ 8 modules transformed.
ssr        | rendering chunks...
ssr        | ../public/vite-ssr/assets/300-1-fygQQA67.png                44.61 kB
ssr        | ../public/vite-ssr/assets/HelloWorld-Ci7TJ7rR.js             0.29 kB
ssr        | ../public/vite-ssr/assets/FirstModal-DpbzNqSw.js   0.33 kB
ssr        | ../public/vite-ssr/ssr.js                                    1.00 kB
ssr        | ../public/vite-ssr/assets/SignInForm-CqrlOqFP.js    7.80 kB
ssr        | ✓ built in 170ms
ssr        | Done in 0.65s.
ssr        | Build with Vite complete: /Users/user/projects/experiments/new_rails_app/public/vite-dev
ssr        | Starting SSR server on port 13714...
ssr        | Inertia SSR server started.

I checked the vite-dev and vite-ssr directories, they have the same structure and also the same files.

However, looking at the page in if SSR mode, I have the following error: http://localhost:3000/vite-dev/assets/300-1-fygQQA67.png 404 (Not Found). Again the file exists but gives an error. However, if I access http://localhost:3000/vite-ssr/assets/300-1-fygQQA67.png it works.

looking at the page em js enabled:

http://localhost:3000/vite-dev/assets/300-1-fygQQA67.png 404 (Not Found) 

react-dom_client.js?v=08ac10f7:521 Warning: Prop `src` did not match. Server: "/vite-dev/assets/300-1-fygQQA67.png" Client: "/vite-dev/templates/default/dist/assets/media/avatars/300-1.png"

Why?

config/vite.json

{
  "all": {
    "sourceCodeDir": "frontend"
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "ssrBuildEnabled": true,
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  },
  "production": {
    "ssrBuildEnabled": true
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from "vite-plugin-full-reload";

import richSvg from "vite-plugin-react-rich-svg";

export default defineConfig({
  build: {
    ssrEmitAssets: true
  },
  esbuild: {
    loader: "jsx",
    jsx: "automatic",
  },
  plugins: [
    FullReload(["config/routes.rb", "app/views/**/*"]),
    RubyPlugin(),
    richSvg(),
  ],
})

component

...

import avatar from "~/templates/default/dist/assets/media/avatars/300-1.png?url";

export default function SignInForm(props) {
  return (
    ...
    <img alt="" className="w-full h-32 object-cover" src={avatar} />
    ...
  )
}