Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: React does not recognize the htmlEl prop on a DOM element. #1471

Open
mkst opened this issue Feb 13, 2025 · 0 comments
Open

Warning: React does not recognize the htmlEl prop on a DOM element. #1471

mkst opened this issue Feb 13, 2025 · 0 comments

Comments

@mkst
Copy link
Collaborator

mkst commented Feb 13, 2025

frontend-1  | Warning: React does not recognize the `htmlEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `htmlel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
frontend-1  |     at label
frontend-1  |     at FormLabel (webpack-internal:///(ssr)/./src/app/(navfooter)/new/NewScratchForm.tsx:43:22)
frontend-1  |     at div
frontend-1  |     at div
frontend-1  |     at NewScratchForm (webpack-internal:///(ssr)/./src/app/(navfooter)/new/NewScratchForm.tsx:90:27)
frontend-1  |     at Lazy
frontend-1  |     at main
frontend-1  |     at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:242:11)
frontend-1  |     at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
frontend-1  |     at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
frontend-1  |     at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
frontend-1  |     at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:347:11)
frontend-1  |     at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
frontend-1  |     at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:153:9)
frontend-1  |     at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:228:11)
frontend-1  |     at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
frontend-1  |     at Lazy
frontend-1  |     at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:367:11)
frontend-1  |     at Lazy
frontend-1  |     at div
frontend-1  |     at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:242:11)
frontend-1  |     at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
frontend-1  |     at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
frontend-1  |     at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
frontend-1  |     at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:347:11)
frontend-1  |     at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9)
frontend-1  |     at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
frontend-1  |     at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:153:9)
frontend-1  |     at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:228:11)
frontend-1  |     at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
frontend-1  |     at Lazy
frontend-1  |     at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:367:11)
frontend-1  |     at Lazy
frontend-1  |     at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:242:11)
frontend-1  |     at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
frontend-1  |     at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
frontend-1  |     at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
frontend-1  |     at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
frontend-1  |     at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:347:11)
frontend-1  |     at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9)
frontend-1  |     at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
frontend-1  |     at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:153:9)
frontend-1  |     at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:228:11)
frontend-1  |     at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
frontend-1  |     at Lazy
frontend-1  |     at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:367:11)
frontend-1  |     at Lazy
frontend-1  |     at body
frontend-1  |     at html
frontend-1  |     at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
frontend-1  |     at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
frontend-1  |     at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
frontend-1  |     at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:322:11)
frontend-1  |     at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:202:11)
frontend-1  |     at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9)
frontend-1  |     at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)
frontend-1  |     at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:564:13)
frontend-1  |     at Lazy
frontend-1  |     at r6 (/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:19018)
frontend-1  |     at r6 (/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:19018)
frontend-1  |     at ServerInsertedHTMLProvider (/frontend/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:24765)

I think it's crying about:

interface FormLabelProps {
    children: React.ReactNode;
    htmlEl?: string;
    small?: string;
}

function FormLabel({ children, htmlEl, small }: FormLabelProps) {
    const Tag = htmlEl ? "label" : "p";
    return (
        <Tag
            className="m-0 block p-2.5 font-semibold text-[0.9em] text-[color:var(--g1700)]"
            {...(htmlEl && { htmlEl })}
        >
            {children}
            {small && (
                <small className="pl-2 font-normal text-[0.8em] text-[color:var(--g800)]">
                    {small}
                </small>
            )}
        </Tag>
    );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant