Warning with nextjs use - Extra attributes from the server
mr-scrpt opened this issue · 3 comments
Expected Behavior
No error
Actual Behavior
Warning: Extra attributes from the server: class at code at pre at div at ParseHTML (webpack-internal:///(app-pages-browser)/./components/shared/ParseHTML/ParseHTML.tsx:83:13) at section at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:241:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:338:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:130:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:348:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:241:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:338:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:130:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:348:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:241:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.0.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:54:9)
Steps to Reproduce
When using it with nextjs 14.01, I get a warning in the browser console. Here is the component code
'use client'
import 'prismjs/components/prism-aspnet'
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-c'
import 'prismjs/components/prism-cpp'
import 'prismjs/components/prism-csharp'
import 'prismjs/components/prism-dart'
import 'prismjs/components/prism-go'
import 'prismjs/components/prism-java'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-jsx'
import 'prismjs/components/prism-kotlin'
import 'prismjs/components/prism-mongodb'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-r'
import 'prismjs/components/prism-ruby'
import 'prismjs/components/prism-rust'
import 'prismjs/components/prism-sass'
import 'prismjs/components/prism-solidity'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-typescript'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
interface ParseHTMLProps extends HTMLAttributes<HTMLDivElement> {
data: string
}
export const ParseHTML: FC<ParseHTMLProps> = (props) => {
const { data } = props
useEffect(() => {
Prism.highlightAll()
}, [])
return <div className="markdown w-full min-f-full">{parse(data)}</div>
}
Tried this variant
'use client'
import { FC, HTMLAttributes, useEffect, useState } from 'react'
import Prism from 'prismjs'
import parse from 'html-react-parser'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-java'
import 'prismjs/components/prism-c'
import 'prismjs/components/prism-cpp'
import 'prismjs/components/prism-csharp'
import 'prismjs/components/prism-aspnet'
import 'prismjs/components/prism-sass'
import 'prismjs/components/prism-jsx'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-solidity'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-dart'
import 'prismjs/components/prism-ruby'
import 'prismjs/components/prism-rust'
import 'prismjs/components/prism-r'
import 'prismjs/components/prism-kotlin'
import 'prismjs/components/prism-go'
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-mongodb'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
interface ParseHTMLProps extends HTMLAttributes<HTMLDivElement> {
data: string
}
export const ParseHTML: FC<ParseHTMLProps> = (props) => {
const { data } = props
const [mounted, setMounted] = useState(false)
const codeHTML = parse(data)
useEffect(() => {
setMounted(true)
}, [])
useEffect(() => {
Prism.highlightAll()
}, [])
if (!mounted) {
return null
}
return <div className="markdown w-full min-f-full">{codeHTML}</div>
}
In this case the error disappears, but the code is not parsed either
Environment
- Version: "html-react-parser": "^5.0.6",
- Platform: "html-react-parser": "^5.0.6",
- Browser: Chrome
- OS: MacOS Sanoma
Thanks for opening this issue @mr-scrpt! Can you provide a reproducible example using CodeSandbox?
Most often occurs when running certain Chrome extensions such as Lastpass, 1password, etc. More: vercel/next.js#22388
Thanks for the info @StephenGrider. So it seems like this is unrelated to html-react-parser