Duplicate props with @next/codemod new-link

[andrewmartin]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

I'm not sure this is super relevant as it's related to the @next/codemod package, but here you go:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 14.20.0
      npm: 6.14.17
      Yarn: 1.22.5
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 12.1.6
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I think I may have used the <Link /> API incorrectly, so I'm not sure this falls into the path of something that should be handled by the mod, but I ran:

npx @next/codemod new-link .

And it worked, but I had to manually go thru and fix No duplicate props allowed react/jsx-no-duplicate-props errors because all of my links had two href attributes after the mod.

Easy enough to fix, but I thought I'd throw it out there as something maybe the codemod could account for?

<Link href={href} href={href} />

Expected Behavior

I should only see one href attribute.

Link to reproduction

NA

To Reproduce

This should happen on any next repo with a <Link href={href} /><a href={href}></a></Link> element structure.

[Pranav-yadav]

@balazsorban44 I would like to help w/ this one; if it's not assigned to anyone already :)

PS: I think this issue has something to do w/ following lines of code ?

next.js/packages/next-codemod/transforms/new-link.ts

Lines 68 to 75 in e2a98cd

	// Direct child elements referenced
	const $childrenElements = $link.childElements()
	const $childrenWithA = $childrenElements.filter((childPath) => {
	return (
	j(childPath).find(j.JSXOpeningElement).get('name').get('name')
	.value === 'a'
	)
	})

next.js/packages/next-codemod/transforms/new-link.ts

Lines 85 to 93 in e2a98cd

	const props = $childrenWithA.get('attributes').value
	const hasProps = props.length > 0
	if (hasProps) {
	// Add props to <Link>
	$link.get('attributes').value.push(...props)
	// Remove props from <a>
	props.length = 0
	}

[ishaqibrahimbot]

Hey @balazsorban44!

I've submitted a PR that fixes this issue. Would be great if you could review it and if satisfactory, let me know of any due diligence I might need to do to get this merged. I'm fairly new to OS contributions and this project as well, so would appreciate any guidance about steps I might've missed. Thanks!

[andrewmartin]

Added a comment, great addition and I think it'd be cool to see this in a shared helper or util somewhere. Seems like a common use case to avoid spreading and adding duplicate props.

[ishaqibrahimbot]

Yeah seems to be a handy pattern. I'll look into where it would be best to put this and how it would be interfaced with.

[koba04]

This issue has already been fixed at #42158, so this can be closed.

[timneutkens]

Thanks @koba04!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.