TypeError: head.rewind is not a function - Next.js 9.x incompatibilities

[sync]

Hey, when running this on now with latest next.js 9.x the whole app crashes with this error. Looking at my node modules, only next-graphql-react uses head.rewind. So i think something has changed since latest next.js release.

START RequestId: 1ba5763f-49ae-40b4-8c04-7d160a106d4b Version: $LATEST
2019-07-13T00:53:14.858Z    1ba5763f-49ae-40b4-8c04-7d160a106d4b    ERROR   Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: head.rewind is not a function","stack":["Runtime.UnhandledPromiseRejection: TypeError: head.rewind is not a function","    at process.on (/var/runtime/index.js:29:13)","    at process.emit (events.js:194:15)","    at emitPromiseRejectionWarnings (internal/process/promises.js:119:20)","    at process._tickCallback (internal/process/next_tick.js:69:34)"],"reason":{"errorType":"TypeError","errorMessage":"head.rewind is not a function","stack":["TypeError: head.rewind is not a function","    at /var/task/page.js:10686:22","    at process._tickCallback (internal/process/next_tick.js:68:7)"]},"promise":{}}
2019-07-13T00:53:14.861Z    1ba5763f-49ae-40b4-8c04-7d160a106d4b    ERROR   Unhandled rejection: TypeError: head.rewind is not a function
    at /var/task/page.js:10686:22
    at process._tickCallback (internal/process/next_tick.js:68:7)
END RequestId: 1ba5763f-49ae-40b4-8c04-7d160a106d4b
REPORT RequestId: 1ba5763f-49ae-40b4-8c04-7d160a106d4b  
Duration: 749.78 ms  Billed Duration: 800 ms   Memory Size: 3008 MB  Max Memory Used: 90 MB 
RequestId: 1ba5763f-49ae-40b4-8c04-7d160a106d4b Error: Runtime exited with error: exit status 1
Runtime.ExitError

[jaydenseric]

I just started upgrading my own projects to Next.js v9 late this week; interestingly I haven't seen this come up yet 🤔

[jaydenseric]

It looks like the Next.js head API was not meant to have changed:

https://github.com/zeit/next.js/blob/v9.0.1/packages/next-server/lib/head.tsx#L166

If there was a problem with using Head.rewind() then Apollo people would also be affected, as the examples still use it:

https://github.com/zeit/next.js/blob/v9.0.1/examples/with-apollo/lib/with-apollo-client.js#L40

[jaydenseric]

So to be clear, it's only in the Zeit Now environment the crash happens? Local next and next start work ok?

[sync]

yes just when running inside now, with same env with other graphql ssr clients everything is good. (just tested another app to see)

[sync]

if you can't reproduce on your side it's fine must be my setup then :-)

[sync]

btw the code is here: https://github.com/sync/next-level/pull/3 did this quickly the other week so might have something funny in there

[txemaleon]

@sync I suspect you wrote head instead of Head, maybe you imported Head but used lowercase instead?

[jaydenseric]

I've been using Next.js v9 for a while now without experiencing this issue. We can reopen if anyone is able to reproduce it 🙏

The only thing I can think of other than a typo or a misconfiguration that may have caused it is that I use Zeit Now v1, and the issue was seen on a v2 deployment.

[matepaiva]

Hello, I have just cloned the next.js example (https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react) and without changing anything I am getting this error.

[jaydenseric]

@matepaiva the example in the Next.js repo is very out of date; it's for graphql-react v11 (latest is v15) and older Next.js versions:

https://github.com/vercel/next.js/blob/0ca24563be9658732eac158c31046ff58bfe78ca/examples/with-graphql-react/package.json#L6-L7

It's not clear in the example package dependencies field that it's for an older Next.js version because Next.js insists on using latest for their examples, which is something you would never do in a real project to avoid things breaking when a major version is published.

Currently the best graphql-react/next-graphql-react example is this one using the latest of everything:

https://github.com/jaydenseric/graphql-react-examples/blob/master/package.json#L22-L23

Sorry for the confusion about the outdated example in the Next.js repo; I plan to update it soon.

[matepaiva]

Hello, @jaydenseric. I didn't have the time to try again, but I have read today that head.rewind is now deprecated in next 11, so maybe the problem will happen anyway?

https://nextjs.org/docs/upgrading#remove-headrewind

Remove Head.rewind

Head.rewind has been a no-op since Next.js 9.5, in Next.js 11 it was removed. You can safely remove your usage of Head.rewind.

[jaydenseric]

@matepaiva that's all been taken care of in the current version of next-graphql-react:

https://github.com/jaydenseric/next-graphql-react/releases/tag/v11.0.0

Everything has been tested against the latest Next.js version.

[matepaiva]

Oh ok! I will have a look at it. Thank you!