[JSS][NextJS] - fix: Prevent passing internalLinkMatcher prop

[bhgeorge]

Prevented passing internalLinkMatcher prop to React Link component as it is an invalid HTML element prop.

Description / Motivation

While attempting to use a custom link matcher (/^\/|^\#/g) to allow internal anchor links, an error occurred for all non-internal link values used in the same component.

When a non-internal link is detected, it attempts to pass all props, including the unused internalLinkMatcher to the JSS React Link component, which then attempts to print it onto the anchor link, resulting in the following error:

Warning: React does not recognize the `internalLinkMatcher` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `internallinkmatcher` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

We can prevent this error by simply not passing the prop to the JSS React Link component.

Testing Details

Tested by utilizing forked version of JSS in existing project.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update (non-breaking change; modified files are limited to the /docs directory)

[vercel]

@bhgeorge is attempting to deploy a commit to the Sitecore JSS Team on Vercel.

A member of the Team first needs to authorize it.

[CobyPear]

Hello @bhgeorge. This seems good to me. Can you please change the target branch to dev?

[bhgeorge]

@CobyPear Rebased and changed target. Thanks!

[CobyPear]

@bhgeorge please check the following lint error:

  51:10  error  Replace `<ReactLink·{...htmlLinkProps}·editable={editable}·showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}·/>` with `(␍⏎····<ReactLink␍⏎······{...htmlLinkProps}␍⏎······editable={editable}␍⏎······showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}␍⏎····/>␍⏎··)`  prettier/prettier

You can run npm run lint --fix in the offending package to fix this.

Thinking about this a bit more, I wonder if another solution to this could be removing the link matcher from the props instead of changing the shape of the returned props, just to keep it easier to maintain in the future. Any thoughts @Sitecore/jss-dev-reviewers ?

[ambrauer]

@bhgeorge please check the following lint error:

  51:10  error  Replace `<ReactLink·{...htmlLinkProps}·editable={editable}·showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}·/>` with `(␍⏎····<ReactLink␍⏎······{...htmlLinkProps}␍⏎······editable={editable}␍⏎······showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}␍⏎····/>␍⏎··)`  prettier/prettier

You can run npm run lint --fix in the offending package to fix this.

Thinking about this a bit more, I wonder if another solution to this could be removing the link matcher from the props instead of changing the shape of the returned props, just to keep it easier to maintain in the future. Any thoughts @Sitecore/jss-dev-reviewers ?

Agree, removing the internalLinkMatcher property from props before passing on to <ReactLink /> seems like it would be preferred. Bit more future-proof. Would also be great to cover this issue with a unit test. @bhgeorge if you want to take a stab at it feel free; otherwise we can contribute that.

[bhgeorge]

@bhgeorge please check the following lint error:

  51:10  error  Replace `<ReactLink·{...htmlLinkProps}·editable={editable}·showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}·/>` with `(␍⏎····<ReactLink␍⏎······{...htmlLinkProps}␍⏎······editable={editable}␍⏎······showLinkTextWithChildrenPresent={showLinkTextWithChildrenPresent}␍⏎····/>␍⏎··)`  prettier/prettier

You can run npm run lint --fix in the offending package to fix this.
Thinking about this a bit more, I wonder if another solution to this could be removing the link matcher from the props instead of changing the shape of the returned props, just to keep it easier to maintain in the future. Any thoughts @Sitecore/jss-dev-reviewers ?

Agree, removing the internalLinkMatcher property from props before passing on to <ReactLink /> seems like it would be preferred. Bit more future-proof. Would also be great to cover this issue with a unit test. @bhgeorge if you want to take a stab at it feel free; otherwise we can contribute that.

I will go ahead and change the implementation and add a unit test.

[ambrauer]

Looks great to me. Thanks @bhgeorge for the contribution!

[ambrauer]

Looks like unused 'render' import snuck in?