Prevent URL from being updated while asPath is delayed (#8756)

* Prevent updating URL when delaying asPath * Ignore TypeScript not liking __NEXT_DATA__ * Update another global to fix standard check
vercel · Sep 16, 2019 · 583b467 · 583b467
1 parent 204028d
commit 583b467
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/next/client/index.js b/packages/next/client/index.js
@@ -163,11 +163,7 @@ export default async ({ webpackHMR: passedWebpackHMR } = {}) => {
     await window.__NEXT_PRELOADREADY(dynamicIds)
   }
 
-  // if auto prerendered and dynamic route wait to update asPath
-  // until after mount to prevent hydration mismatch
-  const initialAsPath = isDynamicRoute(page) && data.nextExport ? page : asPath
-
-  router = createRouter(page, query, initialAsPath, {
+  router = createRouter(page, query, asPath, {
     initialProps: props,
     pageLoader,
     App,

diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
@@ -118,7 +118,11 @@ export default class Router implements BaseRouter {
     this.pageLoader = pageLoader
     this.pathname = pathname
     this.query = query
-    this.asPath = as
+    // if auto prerendered and dynamic route wait to update asPath
+    // until after mount to prevent hydration mismatch
+    this.asPath =
+      // @ts-ignore this is temporarily global (attached to window)
+      isDynamicRoute(pathname) && __NEXT_DATA__.nextExport ? pathname : as
     this.sub = subscription
     this.clc = null
     this._wrapApp = wrapApp

diff --git a/test/integration/auto-export/pages/[post]/[cmnt].js b/test/integration/auto-export/pages/[post]/[cmnt].js
@@ -12,8 +12,12 @@ if (typeof window !== 'undefined') {
     window.caughtWarns.push(1)
     origError(...args)
   }
+  window.pathnames = []
 }
 
 export default () => {
+  if (typeof window !== 'undefined') {
+    window.pathnames.push(window.location.pathname)
+  }
   return <p>{useRouter().asPath}</p>
 }
diff --git a/test/integration/auto-export/test/index.test.js b/test/integration/auto-export/test/index.test.js
@@ -39,6 +39,22 @@ const runTests = () => {
     expect(html).toMatch(/post.*post-1/)
     expect(html).toMatch(/nextExport/)
   })
+
+  it('should update asPath after mount', async () => {
+    const browser = await webdriver(appPort, '/zeit/cmnt-2')
+    await waitFor(500)
+    const html = await browser.eval(`document.documentElement.innerHTML`)
+    expect(html).toMatch(/\/zeit\/cmnt-2/)
+  })
+
+  it('should not replace URL with page name while asPath is delayed', async () => {
+    const browser = await webdriver(appPort, '/zeit/cmnt-1')
+    await waitFor(500)
+    const val = await browser.eval(`!!window.pathnames.find(function(p) {
+      return p !== '/zeit/cmnt-1'
+    })`)
+    expect(val).toBe(false)
+  })
 }
 
 describe('Auto Export', () => {
@@ -73,12 +89,5 @@ describe('Auto Export', () => {
       const numCaught = await browser.eval(`window.caughtWarns.length`)
       expect(numCaught).toBe(0)
     })
-
-    it('should update asPath after mount', async () => {
-      const browser = await webdriver(appPort, '/zeit/cmnt-2')
-      await waitFor(500)
-      const html = await browser.eval(`document.documentElement.innerHTML`)
-      expect(html).toMatch(/\/zeit\/cmnt-2/)
-    })
   })
 })