Content script HMR does not work with preact

[nilooy]

Build tool

Vite

Where do you see the problem?

• [ ] In the browser
• [X] In the terminal

Describe the bug

I have followed the guide from https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7 but i have used preact when configuring with vite and i guess that can be an issue but i would like to know if there's any know solution to this.

Reproduction

1. npm init vite@latest
2. Select a framework: preact
3. Add this to vite.config.js

   
   import { defineConfig } from 'vite'
   import preact from '@preact/preset-vite'
   import { chromeExtension } from "rollup-plugin-chrome-extension";
   import manifest from './manifest.json'

// https://vitejs.dev/config/ export default defineConfig({ plugins: [preact(), chromeExtension({ manifest })] })

4. Add this to `manifest.json` (create one)
```json
{
  "manifest_version": 3,
  "name": "Rpce React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

5. Run with npm run dev

Logs

`error from file writer
Could not load /react-refresh (imported by ../../../../../crx-client-preamble): Unable to load "/@react-refresh" from server.`

System Info

`
  System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 2.93 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.volta/tools/image/node/14.18.1/bin/node
    Yarn: 1.22.11 - ~/.volta/tools/image/yarn/1.22.11/bin/yarn
    npm: 8.5.3 - ~/.volta/tools/image/npm/8.5.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 97.1.34.80
    Chrome: 99.0.4844.83
    Firefox: 97.0.1
    Safari: 14.1.2
  npmPackages:
    rollup-plugin-chrome-extension: ^4.0.1-18 => 4.0.1-18 
    vite: ^2.8.0 => 2.8.6 
`

Severity

annoyance

[nilooy]

also there's no dist folder generated with preact

[nilooy]

Fixed by updated vite.config.js (REF: https://github.com/extend-chrome/rollup-plugin-chrome-extension/issues/255#issuecomment-1073941602)

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'
import { crx } from 'rollup-plugin-chrome-extension'
import manifest from './manifest.json'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), crx({ manifest, 
    contentScripts: {
      preambleCode: false
    } 
  })
  ]
})

[nilooy]

But HMR is not working with preact. Does anyone have any suggestion on that?

[jacksteamdev]

React and Vue required special handling. I'd need to look into how preact HMR is implemented.

[jacksteamdev]

Eventually, this will be something to fix in userland, but we need to get the plugin API stable.

[nilooy]

Can this be any use for vite https://github.com/preactjs/prefresh/tree/main/packages/vite ?