Skip to content
This repository has been archived by the owner on Mar 5, 2021. It is now read-only.

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

Open
Vadorequest opened this issue Mar 10, 2018 · 4 comments
Open

Comments

@Vadorequest
Copy link
Owner

Vadorequest commented Mar 10, 2018

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
Copy link
Owner Author

Opened issue at Next.js: vercel/next.js#3984

@Vadorequest
Copy link
Owner Author

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.

@cbrulak
Copy link

cbrulak commented Mar 4, 2021

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

@Vadorequest
Copy link
Owner Author

@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)

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

No branches or pull requests

2 participants