Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@prefresh/vite not refreshing #454

Closed
konsumer opened this issue Apr 15, 2022 · 6 comments
Closed

@prefresh/vite not refreshing #454

konsumer opened this issue Apr 15, 2022 · 6 comments

Comments

@konsumer
Copy link

konsumer commented Apr 15, 2022

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.

@JoviDeCroock
Copy link
Member

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

@konsumer
Copy link
Author

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.

@konsumer
Copy link
Author

konsumer commented Apr 15, 2022

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

@lquanx
Copy link

lquanx commented May 3, 2022

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

@armincerf
Copy link

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",
    },
  },
});

@mbenford
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants