From 8e2c199ea7d5c9d27090e6b405ae1ff2f0b1b6b8 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Thu, 26 Jul 2018 12:38:45 +0200
Subject: [PATCH] Fix dynamic import page navigation (#4842)

Fixes #3775
---
 .babelrc                                       |  1 +
 client/next-dev.js                             |  6 ++++++
 client/noop.js                                 |  0
 test/integration/ondemand/components/hello.js  |  1 +
 test/integration/ondemand/pages/nav/dynamic.js |  7 +++++++
 test/integration/ondemand/pages/nav/index.js   |  5 +++++
 test/integration/ondemand/test/index.test.js   | 18 ++++++++++++++++++
 7 files changed, 38 insertions(+)
 create mode 100644 client/noop.js
 create mode 100644 test/integration/ondemand/components/hello.js
 create mode 100644 test/integration/ondemand/pages/nav/dynamic.js
 create mode 100644 test/integration/ondemand/pages/nav/index.js

diff --git a/.babelrc b/.babelrc
index 44642072..cc1fdc96 100644
--- a/.babelrc
+++ b/.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"
diff --git a/client/next-dev.js b/client/next-dev.js
index 7f825903..5aa14972 100644
--- a/client/next-dev.js
+++ b/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
diff --git a/client/noop.js b/client/noop.js
new file mode 100644
index 00000000..e69de29b
diff --git a/test/integration/ondemand/components/hello.js b/test/integration/ondemand/components/hello.js
new file mode 100644
index 00000000..2957d86a
--- /dev/null
+++ b/test/integration/ondemand/components/hello.js
@@ -0,0 +1 @@
+export default () => <p>Hello</p>
diff --git a/test/integration/ondemand/pages/nav/dynamic.js b/test/integration/ondemand/pages/nav/dynamic.js
new file mode 100644
index 00000000..fc32c3da
--- /dev/null
+++ b/test/integration/ondemand/pages/nav/dynamic.js
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const Hello = dynamic(import('../../components/hello.js'))
+
+export default () => <div className='dynamic-page'>
+  <Hello />
+</div>
diff --git a/test/integration/ondemand/pages/nav/index.js b/test/integration/ondemand/pages/nav/index.js
new file mode 100644
index 00000000..0b873033
--- /dev/null
+++ b/test/integration/ondemand/pages/nav/index.js
@@ -0,0 +1,5 @@
+import Link from 'next/link'
+
+export default () => <div>
+  <Link href='/nav/dynamic'><a id='to-dynamic'>To dynamic import</a></Link>
+</div>
diff --git a/test/integration/ondemand/test/index.test.js b/test/integration/ondemand/test/index.test.js
index f85057a1..a163409a 100644
--- a/test/integration/ondemand/test/index.test.js
+++ b/test/integration/ondemand/test/index.test.js
@@ -1,6 +1,7 @@
 /* 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()
+      }
+    }
+  })
 })