search

aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.
https://million.dev
MIT License
16.55k stars 582 forks source link

Next,js - Warning: Extra attributes from the server: type,id,aria-haspopup,aria-expanded,data-state #1090

Closed Lenghak closed 1 month ago

Lenghak commented 4 months ago

What version of million are you using?

v1.0.0-rc.84

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Linux

What browser are you using?

Brave, Chrome

Describe the Bug

In dev server and in some pages, I got the warning saying

Warning: Extra attributes from the server: type,id,aria-haspopup,aria-expanded,data-state
    at button
    at _c (webpack-internal:///(app-pages-browser)/./src/common/components/ui/button.tsx:40:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:15:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:34:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-slot@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.mjs:15:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-primitive@2.0.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-primitive/dist/index.mjs:36:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-popper@1.2.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-popper/dist/index.mjs:69:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-menu/dist/index.mjs:197:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18._hfj62zklt5zw6dxs7nv7d5revq/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:108:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at Popper (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-popper@1.2.0_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-popper/dist/index.mjs:54:13)
    at Menu (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@radix-ui/react-menu/dist/index.mjs:130:13)
    at Provider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-context@1.1.0_@types+react@18.3.3_react@18.3.1/node_modules/@radix-ui/react-context/dist/index.mjs:34:15)
    at DropdownMenu (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-dropdown-menu@2.1.1_@types+react-dom@18.3.0_@types+react@18.3.3_react-dom@18._hfj62zklt5zw6dxs7nv7d5revq/node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs:66:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at ThemeToggle (webpack-internal:///(app-pages-browser)/./src/common/components/custom/theme-toggle.tsx:28:234)
    at div
    at section
    at section
    at AuthLayout (Server)
    at SignInLayout (Server)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:370:11)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:243:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:349:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/error-boundary.js:160:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:153:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:228:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/render-from-template-context.js:16:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/layout-router.js:370:11)
    at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next-auth@5.0.0-beta.19_next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@1_22a5rbrdzicjkppphjwchfunme/node_modules/next-auth/react.js:251:13)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at SessionProvider (webpack-internal:///(app-pages-browser)/./src/common/components/providers/session-provider.tsx:17:11)
    at QueryClientProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@tanstack+react-query@5.51.1_react@18.3.1/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:27:11)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at QueryClientProviders (webpack-internal:///(app-pages-browser)/./src/common/components/providers/query-client-provider.tsx:48:11)
    at O (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next-themes@0.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next-themes/dist/index.mjs:28:24)
    at z (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next-themes@0.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next-themes/dist/index.mjs:21:47)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@million+lint@1.0.0-rc.84/node_modules/@million/lint/dist/runtime-dev/index.mjs:2574:15)
    at ThemeProvider (webpack-internal:///(app-pages-browser)/./src/common/components/providers/theme-provider.tsx:20:11)
    at Providers (Server)
    at body
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.4_@babel+core@7.24.6_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.77.8/node_modules/next/dist/client/app-index.js:117:11)

What's the expected result?

The component should be rendered successfully without the warning.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-zcbdls?file=app%2Fpage.tsx

Participation

github-actions[bot] commented 4 months ago

Thanks for opening this issue! A maintainer will review it soon.

John-Hejzlar commented 3 months ago

Same issue in Remix with Vite (Remix v2.11.1)

aidenybai commented 2 months ago

@John-Hejzlar @Lenghak taking a look now!

Lenghak commented 1 month ago

Fixed confirmed!

Lenghak commented 1 month ago

@John-Hejzlar Feel free to reopen this issue if the problem still persist in Remix.