Fix dynamic import page navigation (#4842)

Fixes #3775

.babelrc

@@ -5,6 +5,7 @@
     "@babel/preset-flow"
   ],
   "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-runtime"

client/next-dev.js

@@ -2,6 +2,12 @@ import initNext, * as next from './'
 import initOnDemandEntries from './on-demand-entries-client'
 import initWebpackHMR from './webpack-hot-middleware-client'
 
+// Temporary workaround for the issue described here:
+// https://github.com/zeit/next.js/issues/3775#issuecomment-407438123
+// The runtimeChunk doesn't have dynamic import handling code when there hasn't been a dynamic import
+// The runtimeChunk can't hot reload itself currently to correct it when adding pages using on-demand-entries
+import('./noop')
+
 const {
   __NEXT_DATA__: {
     assetPrefix

test/integration/ondemand/components/hello.js

+export default () => <p>Hello</p>

test/integration/ondemand/pages/nav/dynamic.js

+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import('../../components/hello.js'))
+
+export default () => <div className='dynamic-page'>
+  <Hello />
+</div>

test/integration/ondemand/pages/nav/index.js

+import Link from 'next/link'
+
+export default () => <div>
+  <Link href='/nav/dynamic'><a id='to-dynamic'>To dynamic import</a></Link>
+</div>

test/integration/ondemand/test/index.test.js

 /* global jasmine, describe, beforeAll, afterAll, it, expect */
 import { join, resolve } from 'path'
 import { existsSync } from 'fs'
+import webdriver from 'next-webdriver'
 import {
   renderViaHTTP,
   findPort,
@@ -57,4 +58,21 @@ describe('On Demand Entries', () => {
       if (!existsSync(indexPagePath)) return
     }
   })
+
+  it('should navigate to pages with dynamic imports', async () => {
+    let browser
+    try {
+      browser = await webdriver(context.appPort, '/nav')
+      const text = await browser
+        .elementByCss('#to-dynamic').click()
+        .waitForElementByCss('.dynamic-page')
+        .elementByCss('p').text()
+
+      expect(text).toBe('Hello')
+    } finally {
+      if (browser) {
+        browser.close()
+      }
+    }
+  })
 })