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.

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

Setting javaScriptEnabled: false in createPage() never loads page #868

Open
dulnan opened this issue Jun 16, 2024 · 1 comment
Open

Setting javaScriptEnabled: false in createPage() never loads page #868

dulnan opened this issue Jun 16, 2024 · 1 comment
Labels
bug Something isn't working pending triage

Comments

@dulnan
Copy link

dulnan commented Jun 16, 2024

Environment

------------------------------
- Operating System: Linux
- Node Version:     v20.14.0
- Nuxt Version:     3.12.2
- CLI Version:      3.12.0
- Nitro Version:    2.9.6
- Package Manager:  [email protected]
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -
------------------------------

Reproduction

Call createPage() by passing javaScriptEnabled: false in the options:

const page = await createPage('/foobar', {
    javaScriptEnabled: false,
  })

Describe the bug

This will never finish loading the page because the createPage method always waits for hydration to finish. In this case, hydration can't ever finish, so the method's Promise never resolves.

Additional context

Probably a rare use case, but I ran into this issue while explicitly wanting to test the unhydrated SSR output of a page.

Logs

No response

@dosubot dosubot bot added the bug Something isn't working label Jun 16, 2024
Copy link

dosubot bot commented Jun 16, 2024

Hey @dulnan! I'm here to assist with any bugs, questions, or contributions you have. Let's tackle this issue together!

To resolve the issue where setting javaScriptEnabled: false in the createPage() method never loads the page because the method always waits for hydration to finish, you need to modify the waitForHydration function to check if JavaScript is enabled before waiting for hydration. If JavaScript is disabled, the function should not wait for hydration.

Here is the modified code:

export async function waitForHydration(page: Page, url: string, waitUntil?: GotoOptions['waitUntil']): Promise<void> {
  const javaScriptEnabled = await page.evaluate(() => typeof window !== 'undefined');
  
  if (javaScriptEnabled) {
    if (waitUntil === 'hydration') {
      await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false);
    } else if (waitUntil === 'route') {
      await page.waitForFunction(route => window.useNuxtApp?.()._route.fullPath === route, url);
    }
  }
}

This modification ensures that the waitForHydration function only waits for hydration if JavaScript is enabled [1].

To continue talking to Dosu, mention @dosu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working pending triage
Projects
None yet
Development

No branches or pull requests

1 participant