Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(nuxt): abort navigation when updating window.location #21521

Merged
merged 3 commits into from Jun 14, 2023
Merged

fix(nuxt): abort navigation when updating window.location #21521

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f668d32
fix(nuxt): abort navigation when redirecting to external link from mi…
nicolaspayot Jun 11, 2023
6762d95
fix(nuxt): when app is hydrating, navigation should not be aborted fr…
nicolaspayot Jun 14, 2023
5be9e78
Merge branch 'main' into fix/navigateTo-external-middleware-csr
danielroe Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/nuxt/src/app/composables/router.ts
View file
Open in desktop
Expand Up @@ -148,8 +148,9 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na

const router = useRouter()

const nuxtApp = useNuxtApp()

if (process.server) {
const nuxtApp = useNuxtApp()
if (nuxtApp.ssrContext) {
const fullPath = typeof to === 'string' || isExternal ? toPath : router.resolve(to).fullPath || '/'
const location = isExternal ? toPath : joinURL(useRuntimeConfig().app.baseURL, fullPath)
Expand Down Expand Up @@ -183,6 +184,13 @@ export const navigateTo = (to: RouteLocationRaw | undefined | null, options?: Na
} else {
location.href = toPath
}
// Within in a Nuxt route middleware handler
if (inMiddleware) {
// Abort navigation when app is hydrated
if (!nuxtApp.isHydrating) {
return false
}
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a corner case that's not handled here: when the Nuxt app is loaded on a route that has a redirect middleware. The page gets rendered (and is visible during a very short time) before the location changes. If we also return false when nuxtApp.isHydrating, it renders a 404 error / page (that's visible during a very short time).

There's something we could do: delay the return statement, like so, for example:

if (!nuxtApp.isHydrating) {
  return false
}
return new Promise(resolve => setTimeout(resolve, 10))

But it looks a bit hacky 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder what happens if you return a never-resolving promise 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually think that's what's happening with return new Promise(resolve => setTimeout(resolve, 10)) as the location changes before the resolve function gets called.

I like the idea of returning a never-resolving promise (return new Promise(() => {})) for this case 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielroe I've pushed the change. Let me know if this is acceptable. I can't see a case when this would lead to an issue. Maybe if, somehow, location.href = toPath or location.replace(toPath) fail but can this happen?

return Promise.resolve()
}

Expand Down
2 changes: 1 addition & 1 deletion test/bundle.test.ts
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM

it('default client bundle size', async () => {
stats.client = await analyzeSizes('**/*.js', publicDir)
expect(roundToKilobytes(stats.client.totalBytes)).toMatchInlineSnapshot('"97.1k"')
expect(roundToKilobytes(stats.client.totalBytes)).toMatchInlineSnapshot('"97.2k"')
expect(stats.client.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
[
"_nuxt/entry.js",
Expand Down