HMR issues with side_panel manifest option

[dlackey]

I'm trying to establish a good dev workflow while building a side panel chrome extension. Currently, I have to reopen the side panel 2-3 times to reload the react app during development. HMR is not working. The side panel is a new offering, so I wouldn't be surprised if it just isn't supported yet. For reference, I'm using the latest beta version of crxjs.

Because HMR is not working, I'm also interested in testing changes in the browser. However, I have been unable to open the app when I navigate to the url generated by vite (even when I specify the host option).

Any help is greatly appreciated!

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
});

manifest.json

{
  "manifest_version": 3,
  ...
  "background": {
    "service_worker": "src/background/service-worker.js"
  },
  "content_scripts": [
    {
      "matches": ["*"],
      "js": ["src/content/index.js"]
    }
  ],
  "side_panel": {
    "default_path": "src/panel/index.html"
  },
  ...
}

package.json

{
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build"
  },
  "dependencies": {
    ...
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.2"
  },
  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.18",
    "@vitejs/plugin-react": "^4.0.3",
    "vite": "^4.4.5",
    "vitest": "^0.34.1"
  }
}

[dlackey]

I started making progress after specifying the port.

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
  server: {
    strictPort: true,
    port: 5173,
    hmr: {
        clientPort: 5173
    }
  },
});