serverless-with-next5-boilerplate icon indicating copy to clipboard operation
serverless-with-next5-boilerplate copied to clipboard

Known issue: HMR not working on http://localhost:3000 for Next.js

Open Vadorequest opened this issue 6 years ago • 4 comments

Next.js comes with HMR, which is great. But it doesn't work on http://localhost:3000 yet. It works on http://localhost:3001 though

But it would be a better developer experience to have everything working seamlessly on http://localhost:3000

  • I tried to simply use nextProxy(req, res) but got TypeError: Cannot read property 'waitUntilReloaded' of undefined at HotReloader._callee7$ (/Users/vadorequest/dev/serverless-with-next/node_modules/next/dist/server/hot-reloader.js:658:44)
  • Then, I decided to proxy requests that Express doesn't want to handle to 3001, so that Next.js app handles them. But the proxy messes up with HMR and I haven't been able to fix it:
    • I tried to proxy all /_next by doing app.use('/_next/', proxy('http://localhost:3001/_next/')); but then I get 404 for all js scripts like http://localhost:3000/_next/-/main.js
    • I tried to proxy them all one by one but then they return HTML content instead of JS (basically the index page), ex: app.use('/_next/-/main.js', proxy('http://localhost:3001/_next/-/main.js'));
    • If you manually browse to http://localhost:3001/_next/-/main.js it works okay and return the actual JS file
    • I tried to disable HMR by setting dev: false but then the Next.js app complains Could not find a valid build in the '.next' directory!
    • I tried to force contentType to text/event-stream when proxying /_next/webpack-hmr and it seem to work okay as long as Express doesn't catch the request first (which is the case with GET /:level1/:level2 route), and it does display [HMR] connected but nothing happens when a file is changed.

Vadorequest avatar Mar 10 '18 13:03 Vadorequest

Opened issue at Next.js: https://github.com/zeit/next.js/issues/3984

Vadorequest avatar Mar 10 '18 14:03 Vadorequest

The waitUntilReloaded was caused because of the missing nextApp.prepare() call. But when using it, the application become quite unstable, with infinite webpack rebuild, and therefore very slow.

I had noticed the same behaviour on other apps using serverless-offline and nextApp.prepare().

nextApp.prepare() is supposed to be done only once, but because we export our app instead of creating a server, we actually run nextApp.prepare() at every call.

Vadorequest avatar Mar 10 '18 15:03 Vadorequest

was this ever resolved? I'm seeing this error after forking the tutorial.

cbrulak avatar Mar 04 '21 22:03 cbrulak

@cbrulak I strongly suggest not using this boilerplate anymore it's completely outdated.

Take a look at http://github.com/UnlyEd/next-right-now which is up-to-date and much better in every aspect. (more complicated, though)

Vadorequest avatar Mar 04 '21 22:03 Vadorequest