Fix Dynamic next export
Page Hydration Mismatch (#9388)
* Fix `next export` Hydration Mismatch * Lower timeout to 1 minute
This commit is contained in:
parent
154d78461c
commit
6387d9b5bc
5 changed files with 82 additions and 1 deletions
|
@ -123,7 +123,7 @@ export default class Router implements BaseRouter {
|
|||
// 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
|
||||
isDynamicRoute(pathname) && __NEXT_DATA__.autoExport ? pathname : as
|
||||
this.sub = subscription
|
||||
this.clc = null
|
||||
this._wrapApp = wrapApp
|
||||
|
|
7
test/integration/export-dynamic-pages/next.config.js
Normal file
7
test/integration/export-dynamic-pages/next.config.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
exportPathMap() {
|
||||
return {
|
||||
'/regression/jeff-is-cool': { page: '/regression/[slug]' },
|
||||
}
|
||||
},
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import { useRouter } from 'next/router'
|
||||
|
||||
function Regression() {
|
||||
const { asPath } = useRouter()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__AS_PATHS = [...new Set([...(window.__AS_PATHS || []), asPath])]
|
||||
}
|
||||
return <div id="asPath">{asPath}</div>
|
||||
}
|
||||
|
||||
Regression.getInitialProps = () => ({})
|
||||
|
||||
export default Regression
|
52
test/integration/export-dynamic-pages/test/index.test.js
Normal file
52
test/integration/export-dynamic-pages/test/index.test.js
Normal file
|
@ -0,0 +1,52 @@
|
|||
/* eslint-env jest */
|
||||
/* global jasmine */
|
||||
import { join } from 'path'
|
||||
import cheerio from 'cheerio'
|
||||
import webdriver from 'next-webdriver'
|
||||
import {
|
||||
nextBuild,
|
||||
nextExport,
|
||||
startCleanStaticServer,
|
||||
stopApp,
|
||||
renderViaHTTP,
|
||||
waitFor,
|
||||
} from 'next-test-utils'
|
||||
|
||||
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60
|
||||
const appDir = join(__dirname, '../')
|
||||
const outdir = join(appDir, 'out')
|
||||
|
||||
describe('Export Dyanmic Pages', () => {
|
||||
let server
|
||||
let port
|
||||
beforeAll(async () => {
|
||||
await nextBuild(appDir)
|
||||
await nextExport(appDir, { outdir })
|
||||
|
||||
server = await startCleanStaticServer(outdir)
|
||||
port = server.address().port
|
||||
})
|
||||
|
||||
afterAll(async () => {
|
||||
await stopApp(server)
|
||||
})
|
||||
|
||||
it('should of exported with correct asPath', async () => {
|
||||
const html = await renderViaHTTP(port, '/regression/jeff-is-cool')
|
||||
const $ = cheerio.load(html)
|
||||
expect($('#asPath').text()).toBe('/regression/jeff-is-cool')
|
||||
})
|
||||
|
||||
it('should hydrate with correct asPath', async () => {
|
||||
expect.assertions(1)
|
||||
const browser = await webdriver(port, '/regression/jeff-is-cool')
|
||||
try {
|
||||
await waitFor(3000)
|
||||
expect(await browser.eval(`window.__AS_PATHS`)).toEqual([
|
||||
'/regression/jeff-is-cool',
|
||||
])
|
||||
} finally {
|
||||
await browser.close()
|
||||
}
|
||||
})
|
||||
})
|
|
@ -286,6 +286,15 @@ export async function startStaticServer(dir) {
|
|||
return server
|
||||
}
|
||||
|
||||
export async function startCleanStaticServer(dir) {
|
||||
const app = express()
|
||||
const server = http.createServer(app)
|
||||
app.use(express.static(dir, { extensions: ['html'] }))
|
||||
|
||||
await promiseCall(server, 'listen')
|
||||
return server
|
||||
}
|
||||
|
||||
export async function check(contentFn, regex) {
|
||||
let found = false
|
||||
const timeout = setTimeout(async () => {
|
||||
|
|
Loading…
Reference in a new issue