Next.js: Next 9 dynamic router invalid tag if you use a styled(Link) from styled-components

[muxica]

Bug report

When passing a next Link as a styled component to the dynamic routing feature, you receive an "Invariant Violation: Invalid tag: /post/second/second-comment" error. It seems that the dynamic-router is very explicitly looking for and is inflexible in allowing a styled-components wrapper to it.

To Reproduce

1. Use the example from: https://github.com/zeit/next.js/tree/canary/examples/dynamic-routing
2. Install styled-components library
3. Open pages/post/[id]/index.js in your editor
4. add the line import styled from "styled-components"
5. Create a styled component using the next/link component with any styling you'd like. const TestLink = styled(Link)cursor: pointer;``
6. Replace any of the instances of with your TestLink version
7. Check out the behavior in your browser.

Expected behavior

Expect to see the exact same dynamic route navigation behavior as the vanilla version of the example.

Additional context

I first ran into the issue on a separate project. After searching, I found the example linked above. With some trial and error, I narrowed down that the only difference between the example and my code was the use of styled components. I then verified that this was the cause by adding styled components to the dynamic-routing example.

[huv1k]

You should style a tag inside Link, Link works as a wrapper around a tag. If its still problem please ping here.

[s-h-a-d-o-w]

You can simply use passHref on Link to force it to pass the href property to a child even if it isn't an a tag. (I just faced the same issue and this resolved it for me.)

It's documented here: https://nextjs.org/docs#forcing-the-link-to-expose-href-to-its-child