Merge branch 'canary' into fix-9022

lerna.json

@@ -12,5 +12,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.1.8-canary.1"
+  "version": "9.1.8-canary.2"
 }

package.json

@@ -86,8 +86,8 @@
     "postcss-trolling": "0.1.7",
     "pre-commit": "1.2.2",
     "prettier": "1.19.1",
-    "react": "16.10.2",
-    "react-dom": "16.10.2",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-ssr-prepass": "1.0.8",
     "release": "6.0.1",
     "request-promise-core": "1.1.2",
@@ -100,11 +100,13 @@
     "tree-kill": "1.2.1",
     "typescript": "3.7.3",
     "wait-port": "0.2.2",
-    "webpack-bundle-analyzer": "3.3.2"
+    "webpack-bundle-analyzer": "3.3.2",
+    "browserslist": "^4.8.3",
+    "caniuse-lite": "^1.0.30001019"
   },
   "resolutions": {
-    "browserslist": "^4.7.1",
-    "caniuse-lite": "^1.0.30001002"
+    "browserslist": "^4.8.3",
+    "caniuse-lite": "^1.0.30001019"
   },
   "engines": {
     "node": ">= 8.0.0"

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "keywords": [
     "react",
     "next",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "nextjs": {
     "name": "Google Analytics",
     "required-env": [

packages/next-plugin-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-material-ui",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "nextjs": {
     "name": "Material UI",
     "required-env": []

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "nextjs": {
     "name": "Sentry",
     "required-env": [

packages/next/client/page-loader.js

@@ -69,7 +69,11 @@ export default class PageLoader {
   getDependencies(route) {
     return this.promisedBuildManifest.then(
       man =>
-        (man[route] && man[route].map(url => `/_next/${encodeURI(url)}`)) || []
+        (man[route] &&
+          man[route].map(
+            url => `${this.assetPrefix}/_next/${encodeURI(url)}`
+          )) ||
+        []
     )
   }
 
@@ -212,9 +216,9 @@ export default class PageLoader {
       if (cn.saveData || /2g/.test(cn.effectiveType)) return Promise.resolve()
     }
 
-    let url = this.assetPrefix
+    let url
     if (isDependency) {
-      url += route
+      url = route
     } else {
       route = normalizeRoute(route)
       this.prefetched[route] = true
@@ -224,7 +228,7 @@ export default class PageLoader {
         scriptRoute = scriptRoute.replace(/\.js$/, '.module.js')
       }
 
-      url += `/_next/static/${encodeURIComponent(
+      url = `${this.assetPrefix}/_next/static/${encodeURIComponent(
         this.buildId
       )}/pages${encodeURI(scriptRoute)}`
     }

packages/next/next-server/lib/router/utils/route-matcher.ts

@@ -2,7 +2,7 @@ import { getRouteRegex } from './route-regex'
 
 export function getRouteMatcher(routeRegex: ReturnType<typeof getRouteRegex>) {
   const { re, groups } = routeRegex
-  return (pathname: string | undefined) => {
+  return (pathname: string | null | undefined) => {
     const routeMatch = re.exec(pathname!)
     if (!routeMatch) {
       return false

packages/next/next-server/server/lib/path-match.ts

@@ -11,7 +11,7 @@ export default (customRoute = false) => {
       decode: decodeParam,
     })
 
-    return (pathname: string | undefined, params?: any) => {
+    return (pathname: string | null | undefined, params?: any) => {
       const res = pathname == null ? false : matcher(pathname)
       if (!res) {
         return false

packages/next/next-server/server/router.ts

@@ -6,7 +6,7 @@ export const route = pathMatch()
 
 export type Params = { [param: string]: any }
 
-export type RouteMatch = (pathname: string | undefined) => false | Params
+export type RouteMatch = (pathname: string | null | undefined) => false | Params
 
 type RouteResult = {
   finished: boolean

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.1.8-canary.1",
+  "version": "9.1.8-canary.2",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -171,8 +171,8 @@
     "@types/mkdirp": "0.5.2",
     "@types/nanoid": "2.0.0",
     "@types/node-fetch": "2.3.4",
-    "@types/react": "16.8.18",
-    "@types/react-dom": "16.9.3",
+    "@types/react": "16.9.17",
+    "@types/react-dom": "16.9.4",
     "@types/react-is": "16.7.1",
     "@types/resolve": "0.0.8",
     "@types/send": "0.14.4",

test/integration/chunking/next.config.js

@@ -1,6 +1,7 @@
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin
 module.exports = {
+  assetPrefix: '/foo/',
   experimental: {
     granularChunks: true,
   },

test/integration/chunking/pages/page3.js

@@ -5,7 +5,9 @@ const Page = () => {
   return (
     <div>
       <h2>Page3</h2>
-      <Link href="/page2">Page2</Link>
+      <Link href="/page2">
+        <a id="page2-link">Page2</a>
+      </Link>
     </div>
   )
 }

test/integration/chunking/test/index.test.js

@@ -1,12 +1,14 @@
 /* eslint-env jest */
 /* global jasmine */
 import { join } from 'path'
+import express from 'express'
+import http from 'http'
 import {
   nextBuild,
-  findPort,
   waitFor,
-  nextStart,
-  killApp,
+  nextServer,
+  promiseCall,
+  stopApp,
 } from 'next-test-utils'
 import { readdir, readFile, unlink, access } from 'fs-extra'
 import cheerio from 'cheerio'
@@ -107,18 +109,52 @@ describe('Chunking', () => {
     expect(misplacedReactDom).toBe(false)
   })
 
-  it('should hydrate with granularChunks config', async () => {
-    const appPort = await findPort()
-    const app = await nextStart(appDir, appPort)
+  describe('Serving', () => {
+    let server
+    let appPort
 
-    const browser = await webdriver(appPort, '/page2')
-    await waitFor(1000)
-    const text = await browser.elementByCss('#padded-str').text()
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      const app = nextServer({
+        dir: join(__dirname, '../'),
+        dev: false,
+        quiet: true,
+      })
+
+      const expressApp = express()
+      await app.prepare()
+      expressApp.use('/foo/_next', express.static(join(__dirname, '../.next')))
+      expressApp.use(app.getRequestHandler())
+      server = http.createServer(expressApp)
+      await promiseCall(server, 'listen')
+      appPort = server.address().port
+    })
 
-    expect(text).toBe('__rad__')
+    afterAll(() => stopApp(server))
 
-    await browser.close()
+    it('should hydrate with granularChunks config', async () => {
+      const browser = await webdriver(appPort, '/page2')
+      await waitFor(1000)
+      const text = await browser.elementByCss('#padded-str').text()
 
-    await killApp(app)
+      expect(text).toBe('__rad__')
+
+      await browser.close()
+    })
+
+    it('should load chunks when navigating', async () => {
+      const browser = await webdriver(appPort, '/page3')
+      await waitFor(1000)
+      const text = await browser
+        .elementByCss('#page2-link')
+        .click()
+        .waitForElementByCss('#padded-str')
+        .elementByCss('#padded-str')
+        .text()
+
+      expect(text).toBe('__rad__')
+
+      await browser.close()
+    })
   })
 })

test/integration/size-limit/test/index.test.js

@@ -101,7 +101,7 @@ describe('Production response size', () => {
     )
 
     // These numbers are without gzip compression!
-    const delta = responseSizeKilobytes - 198
+    const delta = responseSizeKilobytes - 196
     expect(delta).toBeLessThanOrEqual(0) // don't increase size
     expect(delta).toBeGreaterThanOrEqual(-1) // don't decrease size without updating target
   })

test/lib/next-test-utils.js

@@ -271,7 +271,7 @@ export async function stopApp(server) {
   await promiseCall(server, 'close')
 }
 
-function promiseCall(obj, method, ...args) {
+export function promiseCall(obj, method, ...args) {
   return new Promise((resolve, reject) => {
     const newArgs = [
       ...args,