[GH-ISSUE #670] Cannot connect to the Vite Dev Server on http://localhost:5173

kerem commented

2026-03-02 11:49:49 +03:00

Owner

Originally created by @YoFoon on GitHub (Nov 18, 2024).
Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/670

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

Originally created by @YoFoon on GitHub (Nov 18, 2024). Original GitHub issue: https://github.com/karakeep-app/karakeep/issues/670 ### 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 <img width="213" alt="image" src="https://github.com/user-attachments/assets/1859c18c-1222-4501-8bc9-0be8b0631d35"> ### Device Details _No response_ ### Exact Hoarder Version master

kerem closed this issue

2026-03-02 11:49:49 +03:00

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 18, 2024):

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

@MohamedBassem commented on GitHub (Nov 18, 2024): did you run in 'pnpm dev' in the root of the repo or in the extension directory?

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 18, 2024):

'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

@MohamedBassem commented on GitHub (Nov 18, 2024): '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

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@YoFoon commented on GitHub (Nov 19, 2024):

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();

@YoFoon commented on GitHub (Nov 19, 2024): <img width="716" alt="image" src="https://github.com/user-attachments/assets/404fb458-fe85-45b2-8398-6f5291a4b287"> run `pnpm dev` inside the extension directory, get 'Cannot connect to the Vite Dev Server' <img width="985" alt="image" src="https://github.com/user-attachments/assets/7cc7f030-1487-4f12-b58f-817039b45a63"> 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(); ```

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 19, 2024):

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

@MohamedBassem commented on GitHub (Nov 19, 2024): Ah sorry, run `pnpm run dev` instead inside the extension directory.

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 19, 2024):

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

@MohamedBassem commented on GitHub (Nov 19, 2024): just to confirm, are you loading the extension on the same machine where you're running `pnpm run dev`?

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 19, 2024):

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

@MohamedBassem commented on GitHub (Nov 19, 2024): Also, do you keep `pnpm run dev` running while you're loading the extension in the browser?

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@YoFoon commented on GitHub (Nov 19, 2024):

https://github.com/user-attachments/assets/98ff2e17-1c34-4093-a974-480078e8b9df

@YoFoon commented on GitHub (Nov 19, 2024): <img width="1658" alt="image" src="https://github.com/user-attachments/assets/6b041f13-f819-4a7e-a6ab-ef23f30d4fc1"> https://github.com/user-attachments/assets/98ff2e17-1c34-4093-a974-480078e8b9df

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@YoFoon commented on GitHub (Nov 19, 2024):

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

@YoFoon commented on GitHub (Nov 19, 2024): - remove the extension - load dist to chrome extension it's also not works

kerem commented

2026-03-02 11:49:50 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 19, 2024):

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.

@MohamedBassem commented on GitHub (Nov 19, 2024): 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.

kerem commented

2026-03-02 11:49:51 +03:00

Author

Owner

@YoFoon commented on GitHub (Nov 19, 2024):

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

any other configurations that need to be noted?

@YoFoon commented on GitHub (Nov 19, 2024): <img width="400" alt="image" src="https://github.com/user-attachments/assets/3e568b12-14fe-4983-a844-f5a0e154fe77"> - `pnpm run build` inside the extension directory - load dist to chrome extension any other configurations that need to be noted?

kerem commented

2026-03-02 11:49:51 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 19, 2024):

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

@MohamedBassem commented on GitHub (Nov 19, 2024): nope. You're good to go now. Just point the extension at your hoarder deployment and you can use it.

kerem commented

2026-03-02 11:49:51 +03:00

Author

Owner

@YoFoon commented on GitHub (Nov 20, 2024):

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

@YoFoon commented on GitHub (Nov 20, 2024): It works for me in dev mode. - update "@crxjs/vite-plugin": "2.0.0-beta.28" - add this to vite config ```javascript server: { port: 5173, strictPort: true, hmr: { protocol: "ws", host: "localhost", port: 5173, }, }, ``` You saved my life!! Thank you!! @MohamedBassem

kerem commented

2026-03-02 11:49:51 +03:00

Author

Owner

@MohamedBassem commented on GitHub (Nov 24, 2024):

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

@MohamedBassem commented on GitHub (Nov 24, 2024): Actually thank you for letting me know how to fix it. Sent a fix in 1a2b600.

kerem referenced this issue

2026-03-02 11:55:59 +03:00

[GH-ISSUE #1986] add dropzones for bulk edit mode for focused organisation session #1238

kerem referenced this issue

2026-03-02 11:59:41 +03:00

[PR #1796] feat: rediscovery feed #1903