navigator object breaks projects in v21.0.0

[jim-king-2000]

Version

21.0.0

Platform

ubuntu

Subsystem

No response

What steps will reproduce the bug?

1. Open https://github.com/Cache-Hit-Shanghai/jujiuipcappui/actions/runs/6569771442/job/17846176075
2. Notice the error message:

TypeError: Cannot read properties of undefined (reading 'match')
    at 90370 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:160:29989)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 21570 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:160:[18](https://github.com/Cache-Hit-Shanghai/jujiuipcappui/actions/runs/6569771442/job/17846176075#step:8:19)352)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 27[20](https://github.com/Cache-Hit-Shanghai/jujiuipcappui/actions/runs/6569771442/job/17846176075#step:8:21)6 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:161:47571)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 45131 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:154:116469)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 82043 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:154:115774)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)

Error occurred prerendering page "/en/device/contacts/add". Read more: https://nextjs.org/docs/messages/prerender-error

How often does it reproduce? Is there a required condition?

It reproduces every time. No condition.

What is the expected behavior? Why is that the expected behavior?

Build it successfully. Fall back to v20 it works well.

What do you see instead?

TypeError: Cannot read properties of undefined (reading 'match')
    at 90370 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:160:29989)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 21570 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:160:[18](https://github.com/Cache-Hit-Shanghai/jujiuipcappui/actions/runs/6569771442/job/17846176075#step:8:19)352)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 27[20](https://github.com/Cache-Hit-Shanghai/jujiuipcappui/actions/runs/6569771442/job/17846176075#step:8:21)6 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:161:47571)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 45131 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:154:116469)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)
    at 82043 (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/chunks/9650.js:154:115774)
    at __webpack_require__ (/home/runner/work/jujiuipcappui/jujiuipcappui/.next/server/webpack-runtime.js:1:145)

Error occurred prerendering page "/en/device/contacts/add". Read more: https://nextjs.org/docs/messages/prerender-error

Additional information

It is a regression.

[yunseyeong]

i have same problem too,

[targos]

This is probably due to #47769

I can reproduce a similar crash with a Next.js app. In my case the problem is with this code (not mine, it's from a dependency):

const userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "";
const commandKeyExists = userAgent.includes("Macintosh") || userAgent.includes("iPad") || userAgent.includes("iPhone");

[targos]

/cc @nodejs/tsc I don't know if it was considered before landing the navigator object, but I expect this to affect a lot of front-end code with server-side rendering (or static site generation).
People could previously rely on the fact that if navigator is present, they are in a browser context and can access some properties on it that all browsers implement.

See https://grep.app/search?q=typeof%20navigator%20%21%3D%3D

[jim-king-2000]

#47769 adds navigator to server side context?

[Uzlopak]

When we merge PR #43155 it maybe mitigates this issue?

[mcollina]

@targos I don't think anybody raised that objection. Given I was skeptical to begin with to add this, I'm also ok for dropping.

[anonrig]

@targos because of this risk, we made it a semver major. navigator is in the WHATWG minimum recommended API. we can remove it, but eventually we need to implement/add WHATWG recommendations, don't we?

[targos]

because of this risk, we made it a semver major

That's what we always do with new globals. There should be a very good reason to potentially break so many users (and there's not much they can do in this case, since it breaks their dependencies).

eventually we need to implement/add WHATWG recommendations, don't we?

why?

[mcollina]

@Ethan-Arrowood @styfle wdyt?

[targos]

There is kind of a double-sided problem here:

• On one hand, we are adding more and more browser APIs to help with interoperability
• On the other hand, this specific addition seems to have the opposite effect: interop is broken

[Uzlopak]

IMHO

It was a strategic mistak to add navigator in this minimalistic shape and form. It is not a mvp, as it lacks alot of features.

I assume, that when you green light navigator, we could provide PRs to implement navigator with all necessary flags and options in the next couple of days.

Detecting jsdom in browser-or-node package is interesting: https://github.com/flexdinesh/browser-or-node/blob/master/src/index.js

[jim-king-2000]

So, what is the solution?

[anonrig]

I think the problem is people check for browser instead of checking for node.js.

[aduh95]

A first step would probably be to add a CLI flag to disable the global, as we have for fetch and crypto, so users have at least a workaround.