TypeError: Cannot read properties of undefined (reading 'toLowerCase')

[2giosangmitom]

Link to the code that reproduces this issue

https://github.com/2giosangmitom/blog

To Reproduce

Run npm run build

Current vs. Expected behavior

Node 21:

Node 18:

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun, 15 Oct 2023 18:38:43 +0000
Binaries:
  Node: 21.0.0
  npm: 10.2.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: export

Which area(s) are affected? (Select all that apply)

App Router, Turbopack (--turbo), TypeScript (plugin, built-in types)

Additional context

Seems like it only crashes when using Node 21, I tested with Node 18 and it works.

[veenu840]

I'm facing this issue after running npm run export in a next.js project. We are using Framer Motion for animation
Version of the Framer-motion and Next.js
"framer-motion": "^10.16.4",
"next": "^13.5.6",

TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at userAgentContains (file:///builds/project/projectName/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs:1470:25)
at file:///builds/project/projectName/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs:1476:20
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:430:15)

Build error occurred
Error: Failed to collect page data for /
at /builds/finbook/finbookcms/node_modules/next/dist/build/utils.js:1171:15 {
type: 'Error'
}

[aphrysof]

Hi @veenu840 having the same issue, have you been able to solve it?

[veenu840]

Hi @aphrysof , No it's still not resolved.

[alextracy]

I ran into a similar issue when I upgraded node to 21 from 20.8.1.

[aphrysof]

I had to downgrade my node version back to 18 and it worked!

[algusaem]

It's very funny because in our case, the CI/CD that we have didn't go past the error but whenever I tried to go into the Docker container and run it manually it ran without a single issue :')

We ended up fixing it by going back to another node version (19.9.0), hope this gets fixed soon!

[YukiKitagata]

This issue may be related to the addition of the navigator object in Node.js v21.

nodejs/node#50412

[jacobgawel]

I'm still experiencing issues with this

[FilFarEu]

With framer-motion I also have the same issue:
Cannot read properties of undefined (reading 'toLowerCase')

my setup:
"dependencies": {
"@formatjs/intl-localematcher": "^0.4.2",
"@headlessui/react": "^1.7.17",
"axios": "^0.21.1",
"bootstrap": "^5.3.2",
"framer-motion": "^10.16.4",
"negotiator": "^0.6.3",
"next": "13.5.4",
"next-intl": "^3.0.0-beta.19",
"react": "^18",
"react-countup": "^6.4.2",
"react-dom": "^18",
"react-icons": "^4.11.0",
"react-parallax": "^3.5.1",
"swiper": "^11.0.3",
"swr": "^1.0.0"
},

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.