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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Next 11.1.2 throws TypeError: DocumentComponent.renderDocument is not a function #263

Closed
1 of 2 tasks
fracture91 opened this issue Sep 22, 2021 · 7 comments
Closed
1 of 2 tasks

Next 11.1.2 throws TypeError: DocumentComponent.renderDocument is not a function #263

fracture91 opened this issue Sep 22, 2021 · 7 comments

Comments

@fracture91
Copy link

fracture91 commented Sep 22, 2021 •
edited
Loading

馃悰 Bug Report

Using next-page-tester 0.28.0 with next 11.1.2 (and possibly 11.1.1?) throws the following error with useDocument: true:

    TypeError: DocumentComponent.renderDocument is not a function

      4 | describe("404 page", () => {
      5 |   it("has a 404 status code", async () => {
    > 6 |     const { render } = await getPage({ route: "/asdf1234", useDocument: true })
        |                        ^
      7 |     render()
      8 |     expectStatusCode(404)
      9 |   })

      at node_modules/next-page-tester/dist/_document/render.js:96:34
      at Object.executeAsIfOnServer (node_modules/next-page-tester/dist/server.js:33:16)
      at getPage (node_modules/next-page-tester/dist/getPage.js:70:31)
      at Object.<anonymous> (__tests__/pages/404.js:6:24)

It looks like it's reaching this line of code https://github.com/toomuchdesign/next-page-tester/blob/bbde6b3714805c3e2d002f390ea28fa25aa6f61e/src/_document/render.tsx#L151

But the renderDocument function was deleted in this commit :(

vercel/next.js@08a2478#diff-5d810eb5cd68f6a6a3597e5472015f0c199e21d97cdabc9f7d5ac3fa85adc369L179

Reproduction

I'm guessing it's trivial enough to bump your next version and see your tests fail

Expected behavior

No errors :)

Jest patch

Have you patched Jest as described here?

  • yes
  • no, because I'm using Jest 27

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node
    Yarn: 1.22.5 - /opt/homebrew/Cellar/yvm/4.1.1/shim/yarn
    npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm
  npmPackages:
    jest: ^27.0.0 => 27.0.4
@fracture91 fracture91 changed the title Next 11.2 throws TypeError: DocumentComponent.renderDocument is not a function Next 11.1.2 throws TypeError: DocumentComponent.renderDocument is not a function Sep 22, 2021
@toomuchdesign toomuchdesign mentioned this issue Sep 22, 2021
Closed
2 tasks
@toomuchdesign toomuchdesign linked a pull request Sep 22, 2021 that will close this issue
fix: _document rendering with next v11.1.1+ #264
Closed
2 tasks
@toomuchdesign
Copy link
Collaborator

toomuchdesign commented Sep 22, 2021 •
edited
Loading

Hi @fracture91. Thanks for reporting 鉂わ笍

It seems that Next.js deeply refactored document rendering, which is the reason why we decided to keep our useDocument option experimental, since very dependent over next.js internals.

I see at least 3 options here (sorted by preference):

  1. figure out how Next.js renders document element now and replicate it
  2. isolate document rendering logic so that next-page-tester can work with useDocument turned off
  3. remove useDocument option :(

Since I can't tell how long this will take, I'd like to give option 2 a try in order to not lock all users to next 11.1.1.

In the meanwhile any kind of support to get to option 1 is very welcome.

@toomuchdesign toomuchdesign mentioned this issue Sep 23, 2021
Merged
2 tasks
@toomuchdesign
Copy link
Collaborator

I've spent a few few hours on the topic: I could get document rendering to work again with still 3 red tests (of which one concerning head elements update).

Since I won't be able to spend so much time on this, I will try to release a working breaking version with useDocument option disabled (#267).

Current document rendering implementation heavily relies on next.js internal files. A different approach might consist of re-implementing the minimum document rendering functionality with as little as possible dependencies toward next.js. If possible :)

In the meanwhile I'll be happy to support anybody who wanted to give it a try. PR #264 is a good starting point.

@toomuchdesign
Copy link
Collaborator

Core functionality against Next.js v11.1.2+ should be restored with v0.29.0. useDocument option was (hopefully) temporarily disabled and now returns an error.

@fracture91 can you confirm that the issue is resolved?

@fracture91
Copy link
Author

@toomuchdesign Thanks for looking into this and getting a fix out.

I can confirm that the error message shows up as expected, and setting useDocument to false generally fixes things (except where I'm testing behavior that depends on my custom _document.tsx).

A couple of surprising things happened without useDocument: true though:

  1. Some meta tags inside a <Head> element in my custom _app.tsx no longer show up - but that might be expected? next/head tags are not populated on server or client render聽#154 (comment)
  2. I'm getting a mismatch between client and server renders which suggests that the client is ignoring my custom images.deviceSizes in next.config.js. This only happens for the first executed test - subsequent tests in the same file don't mismatch and pass just fine. This problem looks familiar but I'm not sure where I saw it before... and I don't expect any help without a minimal reproduction. I may have worked around it with useDocument.

I think for now I'm going to try to stick with next 11.1.0 and next-page-tester 0.28.x so I can keep the useDocument behavior. It makes sense to hold off on supporting useDocument until the next.js implementation stabilizes.

@toomuchdesign
Copy link
Collaborator

toomuchdesign commented Oct 1, 2021 •
edited
Loading

Hi @fracture91,
in regards to point one I'd expect head tag not to receive any update since that should belong to document rendering. Here is how head element is rendered when useDocument option is false.

is point 2 dependent on useDocument option?

@thepuzzlemaster
Copy link

thepuzzlemaster commented Oct 11, 2021 •
edited
Loading

I'm looking for an open bug I can follow, to track when this actually gets fixed. It looks like for the time being the fix was to disable the useDocument option, so all PRs and issues (that I've been able to find) related to this defect have been closed/merged when the disabling of useDocument got checked in.

Is there an open issue tracking this?

I did find this open PR, but it's quite old, relative to the useDocument issue, so it seemed only tangentially related.

Thanks.

@toomuchdesign toomuchdesign mentioned this issue Oct 11, 2021
Open
@toomuchdesign
Copy link
Collaborator

toomuchdesign commented Oct 11, 2021 •
edited
Loading

Hi @thepuzzlemaster,
thanks for pinging us. #268 is a GH issues targeting useDocument option re-enabling.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: _document rendering with next v11.1.1+ next-page-tester/next-page-tester
3 participants
@fracture91 @thepuzzlemaster @toomuchdesign