Next.js Discord

Discord Forum

next.js a , svg and div tag problem

Answered
Giant Chinchilla posted this in #help-forum
Open in Discord
Avatar
Giant ChinchillaOP
somehow i'm getting an error with this code, it's still rendering but with an error. Also does anyone know why my svg isn't working in next.js?
Image
Answered by SupremeDeity
Try removing that<a> above the left-part div
View full answer

15 Replies

Avatar
SupremeDeity
Send a clear pic of the error
Avatar
Giant ChinchillaOP
Image
app-index.js:31 Warning: Expected server HTML to contain a matching <div> in <a>.
    at div
    at a
    at div
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-ponents/react-dev-es--index.js:142:11)
Avatar
SupremeDeity
Try removing that<a> above the left-part div
Answer
Avatar
SupremeDeity
Also going to a index.html page outside the project at that is probably a bad choice. I'm not even sure that will work in production
Avatar
Giant ChinchillaOP
wow you were right, i got rid of the 'floating a tag' and changed the other a tag into a Link component and im using <Link href="/">
however i'm now getting an new error (only when i click on the button)
Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element: <div class=​"navbar active">​…​</div>​flex 
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20318:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20318:9)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20318:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20318:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20318:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/cebpack-internal:///(ap
Avatar
SupremeDeity
That might just be a warning
Avatar
Giant ChinchillaOP
only well i don't have to worry about it then
Avatar
SupremeDeity
Maybe try keeping it as a <a> tag instead of converting to Link
Avatar
Giant ChinchillaOP
yes i have like 1000 line of hickilty picklilty css so i'm guessing its just an error
Avatar
SupremeDeity
Link auto scrolls to the top of the page on navigation by default. Due to you setting position attribute, its gonna get messed up
Avatar
Giant ChinchillaOP
oh wow you were right again, i changed the link tag back to an a tag and not more error (warning)
do you know how you use an SVG in next my ones not working here
Avatar
SupremeDeity
Please open another issue for that. SVG should just work like you are using it, unless its a problem with the svg itself. You test the svg out on online site
Or just try it out on a normal html page and open that page in browser (by using the file explorer -> Open As -> browser )