[pickers] Cannot read properties of undefined (reading 'match')

[rupalchawla]

Steps to reproduce

I started seeing this issue after I updated @mui/x-date-pickers from 6.9.0 to 6.16.3. The error appears on every page that has a component using date picker.

I am using my date picker with "date-fns": "^2.30.0", all the material and react libraries are on latest version as of today.

Here's the stack trace

TypeError: Cannot read properties of undefined (reading 'match')
    at Object.<anonymous> (<project>/node_modules/@mui/x-date-pickers/node/internals/hooks/useDefaultReduceAnimations.js:12:86)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1201:32)
    at Module._load (node:internal/modules/cjs/loader:1017:12)
    at Module.require (node:internal/modules/cjs/loader:1229:19)
    at mod.require (<project>/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (<project>/node_modules/@mui/x-date-pickers/node/internals/components/PickersPopper.js:21:35)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1201:32)
    at Module._load (node:internal/modules/cjs/loader:1017:12)
    at Module.require (node:internal/modules/cjs/loader:1229:19)
    at mod.require (<project>/node_modules/next/dist/server/require-hook.js:64:28)

Current behavior

Throws a typescript error and the page don't render

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: macOS 13.6
  Binaries:
    Node: 21.0.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 10.2.1 - ~<path>/node_modules/.bin/npm
  Browsers:
    Chrome: 118.0.5993.96
    Edge: 118.0.2088.61
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.20 
    @mui/core-downloads-tracker:  5.14.14 
    @mui/icons-material: ^5.14.14 => 5.14.14 
    @mui/lab: ^5.0.0-alpha.149 => 5.0.0-alpha.149 
    @mui/material: ^5.14.14 => 5.14.14 
    @mui/private-theming:  5.14.14 
    @mui/styled-engine:  5.14.14 
    @mui/system:  5.14.14 
    @mui/types:  7.2.6 
    @mui/utils:  5.14.14 
    @mui/x-date-pickers: ^6.9.0 => 6.9.0 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: 18.2.14 => 18.2.31 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components:  5.3.11 
    typescript: 5.0.4 => 5.2.2 

Search keywords: @mui/x-date-pickers

[rupalchawla]

Forgot to mention, if I rollback @mui/x-date-pickers to 6.9.0 keeping rest of the environment as is, the issue goes away.

[LukasTy]

Hello, thank you for creating this issue! 🙏
This looks like a duplicate of #10732.
The problem is caused by early versions of Node 21, which introduced navigator support, but did not implement the most common APIs, like the userAgent.
If you want to use Node 21, there is a suggested workaround to avoid this problem.
The fix (introduction of navigator.userAgent) should land on Node 21.1.0.

If you think that this is a different problem and applying the suggested fix or downgrading the Node version doesn't help—please reopen the issue. 😉