Question 37714 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Next JS 13 app directory fast refresh on dev localhost does not work as intended – Ubuntu

NextJS documentation (https://nextjs.org/docs/basic-features/fast-refresh) states:

Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

But it seems like this is not the case.

I created a nextjs 13.2 project with

npx create-next-app@latest

/app/layout.tsx

import { Navbar } from '@/ui/navbar';

export const metadata = {
  title: 'Test',
  description: 'Test!',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

/app/bolt/page.tsx

export default function Page() {
    return <p>Bolt</p>;
}

/ui/navbar.tsx

import Link from 'next/link';

export function Navbar() {
    return (
          <Link href="/bolt">
            <p>Bolt</p>
          </Link>
    )
}

I start my dev environment with:

next dev

It works as intended, I can navigate to the /bolt route, but when I change the page.tsx to this:

Updated /app/bolt/page.tsx

export default function Page() {
    return <p>Bolt paragraph is updated!</p>;
}

The new page is not re-rendered, nothing happens, I need to stop and restart the dev env.

How can I achieve that my browser automatically updates, if I update my tsx file ?

For testing purposes:

I tried out the create-react-app as well, but it does not use fast refresh when I edit the App.js file.

I am using WSL2 Ubuntu 20.04 on windows10.

I tried adding FAST_REFRESH = false to a .env file
and adding CHOKIDAR_USEPOLLING=true to the start script in package.json like they mentioned in this thread:
Hot Reload is not working in my React App

But none of the above seems working, not even with the default CRA.

Tags:

2

Answers


  1. 0

    Move your projects to the linux folder :

    "wslUbuntuhome{$username}"

    And the Hot Reloading should work properly.

    Login or Signup to reply.
  2. 0

    I feel your pain but I believe that this issue is still not resolved with WSL 2.
    Moving the project to the Linux folder is a workaround but I didn’t quite like it myself because I don’t have just one project and to be honest, I just wanted this to work from everywhere, not just the Linux dir.

    I’d recommend just downgrade to WSS 1.

    • Start your PowerShell
    • check your exact distro name

    wsl --list --verbose

    • downgrade to WSL 1

    wsl --set-version [distroName] 1

    A better solution would be, it’s just to install a second distro, leaving the current one to WSL 2, and the new one will be WSL 1.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search