Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nx fresh setup using the CLI with Next.js but the Fast Refresh is not working

See original GitHub issue

Current Behavior

I created a fresh Nx workspace including a Next.JS app, following the guide in the documentation. Everything works as expected beside the Fast Refresh/Hot Reload - when changing one of the .tsx files - it doesn’t reflected in the browser automatically - you have to manually refresh the page.

I haven’t changed anything in the code, just use everything as-is from the generator. Tried the same with React app (not next.js) and it worked fine. Not sure what I’m missing…

Expected Behavior

Changing one of the files in the project (say, the welcome text in the index.ts) should trigger fast reload.

Steps to Reproduce

Install the Nx CLI (npx create-nx-workspace@latest).
Create a Nx workspace with Next.js included.
Run nx run serve
Change a text in apps/<app-name>/pages/index.ts.
Hot reload/fast refersh not working.

You can find a sample project here: https://github.com/romshiri/monorepo-with-nx

Failure Logs

No failure logs. In fact, the logs do show that fast refresh is supposed to work.

Environment

NX Report complete - copy this into the issue template

Node : 16.9.1 OS : darwin x64 npm : 8.6.0

nx : 13.10.1 @nrwl/angular : Not Found @nrwl/cypress : 13.10.1 @nrwl/detox : Not Found @nrwl/devkit : 13.10.1 @nrwl/eslint-plugin-nx : 13.10.1 @nrwl/express : Not Found @nrwl/jest : 13.10.1 @nrwl/js : 13.10.1 @nrwl/linter : 13.10.1 @nrwl/nest : Not Found @nrwl/next : 13.10.1 @nrwl/node : Not Found @nrwl/nx-cloud : 13.2.2 @nrwl/nx-plugin : Not Found @nrwl/react : 13.10.1 @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 13.10.1 @nrwl/web : 13.10.1 @nrwl/workspace : 13.10.1 typescript : 4.6.3 rxjs : 6.6.7

Community plugins: `

Issue Analytics

State:
Created a year ago
Comments:6 (1 by maintainers)

Top GitHub Comments

6reactions

romshiricommented, Apr 11, 2022

Was able to fix it by bumping Next.js package to “next”: “12.1.4” (from 12.1.2). Apparently it’s an issue with Next.js with React 18 that was fixed on version 12.1.3.

I encourage the team at Nx to update the default next version to the latest version of next.js. FYI.

1reaction

alesmacommented, Apr 15, 2022

I also reproduced this issue and managed to solve it by updating the nextjs version.

Top Results From Across the Web

Basic Features: Fast Refresh - Next.js

Next.js' Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components.

Hot Reload MDX changes in Next.js and Nx

Implementing Fast Refresh. By using next-remote-watch , all the Nx specific setup is being bypassed, since the script invokes the Next.js development server ......

Next.JS Fast Refresh not working on Windows (using ubuntu ...

After changing and saving files using reactJS/Next. JS, the server does not recognize those changes and update itself. I tried changing various ...

Nx: Smart, Fast and Extensible Build System

Next generation build system with first class monorepo support and powerful integrations.

Parcel.js

The zero configuration build tool for the web.