preactjs/prefresh

@prefresh/vite not refreshing

konsumer opened this issue · 6 comments

I am using these versions:

"@prefresh/vite": "^2.2.8"
"vite": "^2.9.1"
"preact": "^10.7.1"

node v17.6.0

I do this in vite.config.js

const { defineConfig } = require('vite')
const prefresh = require('@prefresh/vite')
const { resolve } = require('path')

export default defineConfig({
  plugins: [prefresh()],
  resolve: {
    alias: {
      '~': resolve(__dirname, './src'),
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
})

In the dev-console I see [vite] hot updated: /src/pages/dashboard.jsx, but it doesn't reload unless I refresh. I can make a demo project, if needed.

Can you reproduce it in our tests? Maybe upgrading is enough (v2.9 is new) I am currently on a holiday will chech when I get back

I ended up going with @preact/preset-vite (which I think just uses this) and it all seems to work, so I'm not sure what was up.

I can try to make a repro, though, this weekend, too, just to help troubleshoot.

I also use preact and am having the same issue. I had to hit F5 to refresh.
@vitejs/plugin-react works for me, however it refreshes the whole page instead of hot update. I will switch back to @prefresh/vite when this issue is resolved

I was having the same issue until I added this to my vite.config.ts

  optimizeDeps: {
    include: ['preact/hooks', 'preact/compat', 'preact']
  },

Now it all works great, might help anyone else having this issue.

(full vite.config.ts)

import { defineConfig } from "vite";
import prefresh from "@prefresh/vite";


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [prefresh()],
  optimizeDeps: {
    include: ['preact/hooks', 'preact/compat', 'preact']
  },
  resolve: {
    alias: {
      "react": "preact/compat",
      "react-dom": "preact/compat",
    },
  },
});

@armincerf Do you know why optimizeDeps is required for HMR to work?