Closed Bowriverstudio closed 1 month ago
Hey @Bowriverstudio I suspect the issue comes from the buttons block.
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://brudco.test/testing">Testing</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
The code for adding the Next.js link is here
https://github.com/wpengine/faustjs/blob/canary/packages/blocks/src/blocks/CoreButton.tsx#L38-L39
However I wasn't able to reproduce in the block-support example. I was able to add a local link but the only thing I got was a warning:
next-dev.js:28 Warning: Prop `href` did not match. Server: "http://localhost:3000/sample-page/" Client: "http://localhost:3000/sample-page"
@theodesp What version of next js did you use? I should have mentioned I am using 14.x
https://github.com/wpengine/faustjs/blob/canary/packages/blocks/src/blocks/CoreButton.tsx
has this code
<Link href={attributes?.url}>
<a
target={linkTarget}
className={attributes?.linkClassName}
rel={attributes?.rel}
style={style}>
<span>{attributes?.text}</span>
</a>
</Link>
This code would work in 13.x
Hello @Bowriverstudio Im using the block-support example which is "next": "^14.2.3" I literary copy the link inside the template
<div className="is-layout-constrained">
<h1>{title}</h1>
<WordPressBlocksViewer blocks={blockList} />
<Link href={"/hello"}>
<a>
<span>"Hello"</span>
</a>
</Link>
</div>
And this does not trigger any issues whatsoever. It also builds without an error.
I'm not sure if there a configuration value that makes Next.js stricter.
@theodesp Thank you for looking into this.
This works for me:
<Link href={"/hello"} legacyBehavior>
<a>
<span>"Hello"</span>
</a>
</Link>
This does not:
<Link href={"/hello"}>
<a>
<span>"Hello"</span>
</a>
</Link>
Vercel - does talk about this issue: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
I have made my own block which gets around this issue (but it does not use all the features you guys have added).
Would it be possible to have two versions of the block -- so I could import either one depending on my next js config?
Hey @Bowriverstudio. Thank you. I don't think we should add two versions of the same block just for this. It will be a maintenance hell. What we could do is at some point, add the legacyBehavior property only when we drop support for Next.js < 14. This probably is technical debt that we have to manage, unless there is a better way.
@theodesp Thanks.
Description
When using this: example repo
https://github.com/wpengine/faustjs/blob/canary/examples/next/block-support
And a button in the Gutenberg editor I get the message
Error: Invalid with child. Please remove or use . Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
Steps to reproduce
Use this repo https://github.com/wpengine/faustjs/blob/canary/examples/next/block-support
and this
Additional context
"@faustwp/blocks": "4.0.0", "@faustwp/cli": "^3.0.2", "@faustwp/core": "^3.0.1",
@faustwp/core Version
3.0.1"
@faustwp/cli Version
3.0.2
FaustWP Plugin Version
1.3.1
WordPress Version
6.5.4
Additional environment details
No response
Please confirm that you have searched existing issues in the repo.