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

arunoda · rauchg · commit ffade8d5acc9 · 2017-03-18T16:01:55.000-07:00
* 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.
diff --git a/server/build/webpack.js b/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']
       }
     }
 
diff --git a/server/on-demand-entry-handler.js b/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]
diff --git a/test/integration/basic/pages/hmr/about.js b/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>
+)
diff --git a/test/integration/basic/test/hmr.js b/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()
+      })
+    })
+  })
+}
diff --git a/test/integration/basic/test/index.test.js b/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))
 })

Original file line number	Diff line number	Diff line change
`@@ -52,18 +52,18 @@ export default async function createCompiler (dir, { dev = false, quiet = false,`
`52`	`52`	`// managing pages.`
`53`	`53`	`if (dev) {`
`54`	`54`	`for (const p of devPages) {`
`55`		- entries[join('bundles', p)] = `./${p}?entry`
	`55`	+ entries[join('bundles', p)] = [`./${p}?entry`]
`56`	`56`	`}`
`57`	`57`	`} else {`
`58`	`58`	`for (const p of pages) {`
`59`		- entries[join('bundles', p)] = `./${p}?entry`
	`59`	+ entries[join('bundles', p)] = [`./${p}?entry`]
`60`	`60`	`}`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`for (const p of defaultPages) {`
`64`	`64`	`const entryName = join('bundles', 'pages', p)`
`65`	`65`	`if (!entries[entryName]) {`
`66`		`- entries[entryName] = [...defaultEntries, join(nextPagesDir, p) + '?entry']`
	`66`	`+ entries[entryName] = [join(nextPagesDir, p) + '?entry']`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`