Cannot connect to the Vite Dev Server on http://localhost:5173

[YoFoon]

Describe the Bug

Google Chrome plugin prompts me

Vite Dev Mode

Cannot connect to the Vite Dev Server on http://localhost:5173/

Double-check that Vite is working and reload the extension.

This page will close when the extension reloads.

ADN
Google Chrome plugin auto reload。。

Steps to Reproduce

• run pnpm install in the root of the repo
• cp .env.sample .env, and update .env
  • DATA_DIR=/Users/yofoon/Documents/hoarder/data
  • NEXTAUTH_URL=http://localhost:3000
  • NEXTAUTH_SECRET=sOlazDIXPR6FsmOYzsxls6xxxxxxxxx
  • MEILI_ADDR=http://127.0.0.1:7700 #docker is running
  • OPENAI_API_KEY=sk-proj-cbuY3XUprmF7leh9tRnab_xxxxx
• run pnpm dev in the root of the repo
• run pnpm run db:migrate in the root of the repo
• load dist to chrome extension #apps/browser-extension/dist

Expected Behaviour

Normal use

Screenshots or Additional Context

Device Details

No response

Exact Hoarder Version

master

[MohamedBassem]

did you run in 'pnpm dev' in the root of the repo or in the extension directory?

[MohamedBassem]

'pnpm dev' should be ran inside the extension directory. It'll start a server that needs to be running during the development of the plugin as the plugin will attempt to connect to this server for hot reloads, etc

[YoFoon]

run pnpm dev inside the extension directory, get 'Cannot connect to the Vite Dev Server'

run pnpm dev in the root of the repo, also get 'Cannot connect to the Vite Dev Server'

• dist
  apps/browser-extension/dist/assets/loading-page-1924caaa.js

const VITE_URL = "http://localhost:5173";
document.body.innerHTML = `
<div
      id="app"
      style="
        border: 1px solid #ddd;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      "
    >
      <h1 style="color: #333">Vite Dev Mode</h1>
      <p style="color: #666">
        Cannot connect to the Vite Dev Server on <a href="${VITE_URL}">${VITE_URL}</a>
      </p>
      <p style="color: #666">
        Double-check that Vite is working and reload the extension.
      </p>
      <p style="color: #666">
        This page will close when the extension reloads.
      </p>
      <button
        style="
          padding: 10px 20px;
          border: none;
          background-color: #007bff;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
      >
        Reload Extension
      </button>
    </div>`;
document.body.querySelector("button")?.addEventListener("click", () => {
  chrome.runtime.reload();
});
let tries = 0;
let ready = false;
do {
  try {
    await fetch(VITE_URL);
    ready = true;
  } catch {
    const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);
    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`);
    console.log(`[CRXJS] Retrying in ${timeout}ms...`);
    await new Promise((resolve) => setTimeout(resolve, timeout));
  }
} while (!ready);
location.reload();

[MohamedBassem]

Ah sorry, run pnpm run dev instead inside the extension directory.

[MohamedBassem]

just to confirm, are you loading the extension on the same machine where you're running pnpm run dev?

[MohamedBassem]

Also, do you keep pnpm run dev running while you're loading the extension in the browser?

[YoFoon]

Screen-2024-11-19-083018.mp4

[YoFoon]

• remove the extension
• load dist to chrome extension
  it's also not works

[MohamedBassem]

that's very weird.

Maybe try pnpm run dev --host 0.0.0.0, if that doesn't work, your only option then is to do a prod build with pnpm run build and constantly rebuild+reload everytime you do a change. Not optimal, but I don't see a way around it.

[YoFoon]

• pnpm run build inside the extension directory
• load dist to chrome extension

any other configurations that need to be noted?

[MohamedBassem]

nope. You're good to go now. Just point the extension at your hoarder deployment and you can use it.

[YoFoon]

It works for me in dev mode.

• update "@crxjs/vite-plugin": "2.0.0-beta.28"
• add this to vite config

server: {
    port: 5173,
    strictPort: true,
    hmr: {
      protocol: "ws",
      host: "localhost",
      port: 5173,
    },
  },

You saved my life!!
Thank you!! @MohamedBassem

[MohamedBassem]

Actually thank you for letting me know how to fix it. Sent a fix in 1a2b600.