Next.js: Fast-Refresh doesn't work for example using-preact

[shakib609]

Bug report

Describe the bug

When using the example using-preact to create a new project, the Fast-Refresh doesn't work as expected.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a next.js project from using-preact-example: yarn create next-app --example using-preact using-preact-app
2. Run the dev server yarn dev
3. Change any text inside pages/index.js and save
4. The page shows the previous code and does not change the text

Expected behavior

On changing any text inside JSX elements it should reflect on development environment.

System information

• OS: Manjaro Linux(Kernel 5.4.x)
• Browser: Firefox Developer Edition
• Version of Next.js: 9.4.4
• Version of Node.js: 12.17.0

[Timer]

Fast Refresh is a React feature, so it's expected to not work with Preact.

The example needs to be updated for Preact's specialized support.

[shakib609]

Hi @Timer, I can work on this. Can you kindly assign me to this issue?

[Timer]

I believe the Preact team has started on this @shakib609. Let's see if @jovidecroock has some input before we proceed.

[JoviDeCroock]

Hey @Timer @shakib609

I have some input yes, I fixed this issue in this PR for the demo we're maintaining https://github.com/developit/nextjs-preact-demo/pull/16 this replaces react-fast-refresh with prefresh.

[developit]

I've opened #13976 to update the using-preact example so that it matches the latest version from nextjs-preact-demo including @JoviDeCroock's fix. We're likely going to publish a dedicated Next.js Preact plugin since the configuration here is nontrivial.

[programbo]

I was thinking exactly that when I saw it today.

[wiesson]

I've opened #13976 to update the using-preact example so that it matches the latest version from nextjs-preact-demo including @JoviDeCroock's fix. We're likely going to publish a dedicated Next.js Preact plugin since the configuration here is nontrivial.

Awesome! Can I support you here somehow?

[vitordino]

any news wether someone is working on a next.js preact plugin? 🥺

[JoviDeCroock]

We've published next-plugin-preact @vitordino

[vitordino]

just found it ✨ great work guys.. just opened an PR on the using-preact example to make it the _official_ ™ way

[shakib609]

Closing this issue as the plugin is already published :smile:

[06kellyjac]

I've got a setup based on the preact example and fast refresh seems to be working but I still get this annoying warning:

warn - Fast Refresh is disabled in your application due to an outdatedreactversion. Please upgrade 16.10 or newer! Read more: https://err.sh/next.js/react-version
Do I need to just get over it :sweat_smile: or is this something you'd be open to removing/fixing/rewording?

[martpie]

I can confirm this warning happens to me as well 👍

[einSelbst]

Minor addition If I use yarn I (also) see the message, but not with npm. -> was wrong, also with npm