Fix client error modal not showing in dev (HMR) (#1448)

* Fix HMR not working issue.
Our hot-reload code on the server has custom webpack error dectection logic.
Is supports only multi-modules entries.
So, we need to all entries as multi-module entries
even if there's just a single entry.

* Add a test case for showing errors over HMR.

server/build/webpack.js

@@ -52,18 +52,18 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
     // managing pages.
     if (dev) {
       for (const p of devPages) {
-        entries[join('bundles', p)] = `./${p}?entry`
+        entries[join('bundles', p)] = [`./${p}?entry`]
       }
     } else {
       for (const p of pages) {
-        entries[join('bundles', p)] = `./${p}?entry`
+        entries[join('bundles', p)] = [`./${p}?entry`]
       }
     }
 
     for (const p of defaultPages) {
       const entryName = join('bundles', 'pages', p)
       if (!entries[entryName]) {
-        entries[entryName] = [...defaultEntries, join(nextPagesDir, p) + '?entry']
+        entries[entryName] = [join(nextPagesDir, p) + '?entry']
       }
     }
 

server/on-demand-entry-handler.js

@@ -71,7 +71,7 @@ export default function onDemandEntryHandler (devMiddleware, compiler, {
       const pathname = await resolvePath(pagePath)
       const name = join('bundles', pathname.substring(dir.length))
 
-      const entry = `${pathname}?entry`
+      const entry = [`${pathname}?entry`]
 
       await new Promise((resolve, reject) => {
         const entryInfo = entries[page]

test/integration/basic/pages/hmr/about.js

@@ -0,0 +1,7 @@
+export default () => (
+  <div className='hmr-about-page'>
+    <p>
+      This is the about page.
+    </p>
+  </div>
+)

test/integration/basic/test/hmr.js

@@ -0,0 +1,40 @@
+/* global describe, it, expect */
+import webdriver from 'next-webdriver'
+import { readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+export default (context, render) => {
+  describe('Hot Module Reloading', () => {
+    describe('syntax error', () => {
+      it('should detect the error and recover', async () => {
+        const browser = await webdriver(context.appPort, '/hmr/about')
+        const text = await browser
+          .elementByCss('p').text()
+        expect(text).toBe('This is the about page.')
+
+        const aboutPagePath = join(__dirname, '../', 'pages', 'hmr', 'about.js')
+
+        const originalContent = readFileSync(aboutPagePath, 'utf8')
+        const erroredContent = originalContent.replace('</div>', 'div')
+
+        // change the content
+        writeFileSync(aboutPagePath, erroredContent, 'utf8')
+
+        const errorMessage = await browser
+          .waitForElementByCss('pre')
+          .elementByCss('pre').text()
+        expect(errorMessage.includes('SyntaxError: Unterminated JSX contents')).toBeTruthy()
+
+        // add the original content
+        writeFileSync(aboutPagePath, originalContent, 'utf8')
+
+        const newContent = await browser
+          .waitForElementByCss('.hmr-about-page')
+          .elementByCss('p').text()
+        expect(newContent).toBe('This is the about page.')
+
+        browser.close()
+      })
+    })
+  })
+}

test/integration/basic/test/index.test.js

@@ -14,6 +14,7 @@ import xPoweredBy from './xpowered-by'
 import rendering from './rendering'
 import misc from './misc'
 import clientNavigation from './client-navigation'
+import hmr from './hmr'
 
 const context = {}
 context.app = nextServer({
@@ -57,4 +58,5 @@ describe('Basic Features', () => {
   xPoweredBy(context)
   misc(context)
   clientNavigation(context, (p, q) => renderViaHTTP(context.appPort, p, q))
+  hmr(context, (p, q) => renderViaHTTP(context.appPort, p, q))
 })