Add tests for isomorphic-unfetch bundling issue (#5805)

* Add tests for isomorphic-unfetch bundling issue

* Remove unneeded extra option

* Remove isomorphic-fetch

package.json

@@ -54,6 +54,7 @@
     "fkill": "5.1.0",
     "flatten": "1.0.2",
     "get-port": "3.2.0",
+    "isomorphic-unfetch": "3.0.0",
     "jest-cli": "23.6.0",
     "jest-junit": "^5.0.0",
     "lerna": "^3.4.0",

packages/next/build/webpack-config.js

@@ -213,7 +213,8 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
     ],
     alias: {
       next: NEXT_PROJECT_ROOT
-    }
+    },
+    mainFields: [!isServer && 'browser', !isServer && 'module', 'main'].filter(Boolean)
   }
 
   const webpackMode = dev ? 'development' : 'production'

test/integration/lambdas/pages/fetch.js

@@ -0,0 +1,29 @@
+import fetch from 'isomorphic-unfetch'
+import React from 'react'
+
+export default class extends React.Component {
+  static async getInitialProps () {
+    try {
+      const res = await fetch('')
+      const text = await res.text()
+      console.log(text)
+      return {text}
+    } catch (err) {
+      if (err.message.includes('is not a function')) {
+        return {failed: true, error: err.toString()}
+      }
+
+      return {error: err.toString()}
+    }
+  }
+  render () {
+    const {failed, error, text} = this.props
+    return <div className='fetch-page'>
+      {failed ? 'failed' : ''}
+      {error}
+      <div id='text'>
+        {text}
+      </div>
+    </div>
+  }
+}

test/integration/lambdas/pages/index.js

@@ -1 +1,9 @@
-export default () => 'Hello World'
+import Link from 'next/link'
+export default () => {
+  return <div>
+    Hello World
+    <Link href='/fetch'>
+      <a id='fetchlink'>fetch page</a>
+    </Link>
+  </div>
+}

test/integration/lambdas/test/index.test.js

@@ -8,6 +8,8 @@ import {
   stopApp,
   renderViaHTTP
 } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import fetch from 'node-fetch'
 
 const appDir = join(__dirname, '../')
 let appPort
@@ -35,4 +37,26 @@ describe('Lambdas', () => {
     const html = await renderViaHTTP(appPort, '/')
     expect(html).toMatch(/Hello World/)
   })
+
+  it('should render correctly when importing isomorphic-unfetch', async () => {
+    const url = `http://localhost:${appPort}/fetch`
+    const res = await fetch(url)
+    expect(res.status).toBe(200)
+    const text = await res.text()
+    expect(text.includes('failed')).toBe(false)
+  })
+
+  it('should render correctly when importing isomorphic-unfetch on the client side', async () => {
+    const browser = await webdriver(appPort, '/')
+    try {
+      const text = await browser
+        .elementByCss('a').click()
+        .waitForElementByCss('.fetch-page')
+        .elementByCss('#text').text()
+
+      expect(text).toMatch(/fetch page/)
+    } finally {
+      browser.close()
+    }
+  })
 })