next.js a , svg and div tag problem
Answered
Giant Chinchilla posted this in #help-forum
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?
15 Replies
Clown
Send a clear pic of the error
Giant ChinchillaOP
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)Clown
Try removing that<a> above the left-part div
Answer
Clown
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
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)
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:///(apClown
That might just be a warning
Giant ChinchillaOP
only well i don't have to worry about it then
Clown
Maybe try keeping it as a <a> tag instead of converting to Link
Giant ChinchillaOP
yes i have like 1000 line of hickilty picklilty css so i'm guessing its just an error
Clown
Link auto scrolls to the top of the page on navigation by default. Due to you setting position attribute, its gonna get messed up
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
Clown
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 )