Vite Asset requests very slow (multiples of 60s)

[DaveEshopGuide]

Hi there,
I am using the vite-rails gem to run my rails server with vite. I am using ngrok to tunnel the requests to my server.
(already tried another tunneling service (cloudflared), same result)
The initial request to the root url is fast but then the requests to the javascript assets are served very slow (Multiples of 60s as can be seen in the ngrok log).
Any Idea what might be the issue here? I am not using tailwind.css (as discussed here: vitejs/vite#5145)

It's working fine when using the vite proxy and pointing the ngrok tunnel to port 3036, but that is breaking other things.
I am on Windows 11. It is also working for a colleage who is working on Linux.

This is my vite.config.ts:

import { defineConfig } from 'vite';
import ViteRails from 'vite-plugin-rails';
import react from "@vitejs/plugin-react";

const proxyOptions = {
target: http://127.0.0.1:3000,
changeOrigin: false,
secure: true,
ws: false,
};

export default defineConfig({
server: {
host: 'localhost',
hmr: {
host: 'localhost',
port: 3036,
protocol: 'ws'
},
proxy: {
"^/(\?.)?$": proxyOptions,
"^/api(/|(\?.)?$)": proxyOptions,
},
},
plugins: [
ViteRails({
envVars: {
'CABLE_ENDPOINT': null,
'SHOPIFY_CLIENT_API_KEY': null,
}
}),
react(),
]
})

This is my vite.json:

{
"all": {
"sourceCodeDir": "frontend",
"watchAdditionalPaths": []
},
"development": {
"autoBuild": true,
"publicOutputDir": "vite-dev",
"port": 3036
},
"test": {
"autoBuild": true,
"publicOutputDir": "vite-test",
"port": 3037
}
}

This is my output from ngrok:
GET /vite-dev/pages/ExitIframe.jsx
200 OK 240.2s
GET /vite-dev/pages/NotFound.jsx
200 OK 240.19s
GET /vite-dev/pages/index.jsx
200 OK 180.14s
GET /vite-dev/pages/Import.jsx
200 OK 240.21s
GET /vite-dev/node_modules/.vite/deps/react_jsx-dev-runtime.js
200 OK 180.13s
GET /vite-dev/node_modules/.vite/deps/chunk-DFKQJ226.js
200 OK 180.13s
GET /vite-dev/node_modules/.vite/deps/chunk-DHVF7XXF.js
200 OK 60.02s
GET /vite-dev/node_modules/.vite/deps/chunk-GDXK6ZMY.js
200 OK 60.02s
GET /vite-dev/@fs/C:/Workspace/lexoffice-integration/node_modules/vite/dist/client/env.mjs
200 OK 180.13s
GET /vite-dev/@id/__x00__react/jsx-dev-runtime
200 OK 180.12s
GET /vite-dev/App.jsx
200 OK 180.12s
GET /vite-dev/node_modules/.vite/deps/react-dom.js
200 OK 120.07s
GET /vite-dev/node_modules/.vite/deps/react.js
200 OK 120.08s
GET /vite-dev/@fs/C:/Workspace/lexoffice-integration/node_modules/vite/dist/client/env.mjs
200 OK 120.07s
GET /vite-dev/App.jsx
200 OK 60.03s
GET /vite-dev/node_modules/.vite/deps/react-dom.js
200 OK 60.03s
GET /vite-dev/node_modules/.vite/deps/react.js
200 OK 60.02s
GET /vite-dev/@id/__x00__react/jsx-dev-runtime
200 OK 60.02s
GET /vite-dev/@react-refresh
200 OK 120.02s
GET /vite-dev/@react-refresh
200 OK 60.06s
GET /vite-dev/entrypoints/index.jsx
200 OK 60.07s
GET /vite-dev/@vite/client
200 OK 60.1s
GET /vite-dev/entrypoints/index.jsx
200 OK 60.18s
GET /vite-dev/@vite/client
200 OK 60.19s
GET /
200 OK 718.11ms
GET /
200 OK 1.15s

---

This is my ngrok tunnel config:

authtoken: ***
region: eu
update: true
tunnels:
lexoffice:
proto: http
addr: 3000
subdomain: lexoffice-shopify
version: "2"

Any input is much appreciated.

Best, Dave

[DaveEshopGuide]

This is another request cycle (Loading a login that doesnt use any assets served by vite and then submitting it:

All requests going to the /vite-dev route seem to be slow.

GET /vite-dev/pages/transferlog.jsx | 200 OK | 60.03s
GET /vite-dev/pages/pagename.jsx | 200 OK | 60.02s
GET /vite-dev/pages/index.jsx | 200 OK | 60.03s
GET /vite-dev/pages/ShopSettings.jsx | 200 OK | 60.04s
GET /vite-dev/pages/NotFound.jsx | 200 OK | 60.02s
GET /vite-dev/pages/Import.jsx | 200 OK | 60.03s
GET /vite-dev/pages/ExitIframe.jsx | 200 OK | 60.03s
GET /vite-dev/node_modules/.vite/deps/react_jsx-dev-runtime.js | 200 OK | 60.03s
GET /vite-dev/node_modules/.vite/deps/chunk-DFKQJ226.js | 200 OK | 60.03s
GET /vite-dev/node_modules/.vite/deps/chunk-DHVF7XXF.js | 200 OK | 60.03s
GET /vite-dev/node_modules/.vite/deps/chunk-GDXK6ZMY.js | 200 OK | 60.02s
GET /vite-dev/App.jsx | 200 OK | 60.04s
GET /vite-dev/node_modules/.vite/deps/react-dom.js | 200 OK | 60.04s
GET /vite-dev/node_modules/.vite/deps/react.js | 200 OK | 60.02s
GET /vite-dev/@id/__x00__react/jsx-dev-runtime | 200 OK | 60.03s
GET /vite-dev/@fs/C:/Workspace/lexoffice-integration/node_modules/vite/dist/client/env.mjs | 200 OK | 60.03s
GET /vite-dev/@react-refresh | 200 OK | 60.08s
GET /vite-dev/entrypoints/index.jsx | 200 OK | 60.18s
GET /vite-dev/@vite/client | 200 OK | 60.14s
GET /auth/shopify | 404 Not Found | 460.59ms
GET / | 200 OK | 337.38ms
GET /auth/shopify/callback | 302 Found | 572.5ms
POST /auth/shopify | 302 Found | 229.16ms
GET /api/assets/shopify_app/post_redirect.self-4e264b7a2e2801ba25b52170a762567a066c655a00631c781c84157f022cfb28.js | 200 OK | 212.44ms
GET /login | 200 OK | 235.25ms
GET /api/assets/shopify_app/request_storage_access.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js | 200 OK | 777.87ms
GET /api/assets/shopify_app/storage_access.self-ff7f1734092a074c9a506eafa1c9d376a35a2dab499636a9142c6a41bd154b84.js | 200 OK | 591.49ms
GET /api/assets/shopify_app/storage_access_redirect.self-e3eeff58ecffabf200c97bb9a03b48bc7fa81a0f928ed8b4340f90180b2c9f41.js | 200 OK | 558.88ms
GET /api/assets/shopify_app/app_bridge_2.0.12.self-555952785bc554f69c431a6896e1bc45e6521c571d4452215f57bc4d2f31f19c.js | 200 OK | 522.65ms
GET /api/assets/shopify_app/app_bridge_redirect.self-2e21b737f031beaee0efc1f9e7a9ac86187183599a77496fa16568525afb80d2.js | 200 OK | 447.4ms
GET /api/assets/shopify_app/itp_helper.self-593f8125e98e25cf6f9d5772233dd61c0f6dd9e2bc356441d5b54ef7b42f7a12.js | 200 OK | 373.43ms
POST /api/login | 200 OK | 1.63s
GET /login | 200 OK | 212.88ms
GET /login | 200 OK | 212.6ms
GET /login | 200 OK | 219.25ms
GET /favicon.ico | 200 OK | 10.29ms
GET /login | 200 OK | 220.71ms
GET / | 302 Found |  

[ElMassimo]

Hi Dave!

The 60s response time seems very unusual, and suggests that these requests are hitting some kind of timeout before being served.

If you provide a repo with a minimal reproduction and steps to replicate it, I can take a look.

Try setting "skipProxy": true in your config/vite.json to see if that workarounds the issues with your current setup. You would need to configure the proxy to relay the 3036 port, as asset requests would be made to Vite directly.

[DaveEshopGuide]

Hi Máximo, thanks for your response.
Using the skipProxy option works and I can now point my tunnel to port 3000 to the rails app and it works without the timeout, but only after removing this particular line from the server.proxy option in the vite.config.ts
"^/(\?.*)?$": proxyOptions,

I reckon those were some leftovers coming from setting things up with the shopify CLI and then switching over to using the vite_rails gem.
I can now remove the proxy completely from the vite.config.ts and everything works as it should.

Was that maybe some requests getting passed around in circles between vite and rails?

Thanks again for your input.