Add assetPrefix when fetching script and style dependencies (#9933)

* Add assetPrefix when fetching script and style dependencies for granularChunks

* Lint

* Fix assetPrefix usage with granularChunks

* Add tests for granularChunks with assetPrefix

* Cleanup

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)}`
     }

test/integration/chunking/next.config.js

 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

 /* 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/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,