使用 nextjs 时有一个 react 的警告?

Question

使用 nextjs 时有一个 react 的警告

Warning: React does not recognize the `originalProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `originalprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at button
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/popover/dist/chunk-K4VREUER.mjs:23:115)
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:15:108)
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/popover/dist/chunk-I7AEEVL3.mjs:21:13)
    at Dropdown (webpack-internal:///(ssr)/./node_modules/@nextui-org/dropdown/dist/chunk-FHP3QEBP.mjs:17:13)
    at li
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-MG5LCNUN.mjs:19:13)
    at ul
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-PSG7VTZC.mjs:18:13)
    at header
    at nav
    at eval (webpack-internal:///(ssr)/./node_modules/@nextui-org/navbar/dist/chunk-CMNN5TJ7.mjs:25:13)
    at div
    at body
    at html
    at RootLayout (webpack-internal:///(ssr)/./app/layout.tsx:50:23)
    at Lazy
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:296:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:147:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:99:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:415:13)
    at Lazy
    at Lazy
    at /Users/mac/vscode/xx-pro/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:379796
    at /Users/mac/vscode/xx-pro/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:379796
    at ServerInsertedHTMLProvider (/Users/mac/vscode/xx-pro/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:17279)

首先，针对这种报错信息，我猜测是组件的 prop估计接受了父组件传递下来的参数作为 prop，但是名称又不符合规范
但是，我全局搜索了originalProps这个关键词，发现没有找到。 另外我想知道怎么调试，怎么知道他发生在哪个组件的哪一行。似乎 nextjs没有 java 代码那么容易的定位

Answer 1

似乎是nextui的bug,官方正在修复中

Answer 2

该组件可能在其内部将一个名为originalProps的prop传递给了一个DOM元素，而React并不直接支持这个属性名。如果希望将此prop以自定义属性的形式添加到DOM元素上，应遵循React的规定将其转换为小写形式originalprops。

at RootLayout (webpack-internal:///(ssr)/./app/layout.tsx:50:23)这一行表明问题可能起源于layout.tsx文件的第50行。

虽然Next.js中的堆栈跟踪不是特别直观，但在开发环境中开启source map功能可以帮助您更准确地定位到源代码位置。此外，逐个检查项目中使用的NextUI组件，尤其是涉及到dropdown、popover和navbar的部分，看是否无意中传递了originalProps给这些组件，或者它们内部处理props的方式存在此问题。