serverless-with-next5-boilerplate
serverless-with-next5-boilerplate copied to clipboard
Known issue: HMR not working on http://localhost:3000 for Next.js
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 gotTypeError: 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 doingapp.use('/_next/', proxy('http://localhost:3001/_next/'));
but then I get 404 for all js scripts likehttp://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 complainsCould 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.
- I tried to proxy all
Opened issue at Next.js: https://github.com/zeit/next.js/issues/3984
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.
was this ever resolved? I'm seeing this error after forking the tutorial.
@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)