[examples] `NextLinkComposedProps` gives a TypeScript error
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior đŻ
The nextjs-with-typescript example docs suggest composing NextLink
and MuiLink
using
interface NextLinkComposedProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
Omit<NextLinkProps, 'href' | 'as'> {
to: NextLinkProps['href'];
linkAs?: NextLinkProps['as'];
}
However, TypeScript complains with
Interface âNextLinkComposedPropsâ cannot simultaneously extend types âOmit<AnchorHTMLAttributes<HTMLAnchorElement>, âhrefâ>â and âOmit<InternalLinkProps, âhrefâ | âasâ>â. Named property âonClickâ of types âOmit<AnchorHTMLAttributes<HTMLAnchorElement>, âhrefâ>â and âOmit<InternalLinkProps, âhrefâ | âasâ>â are not identical.
Interface âNextLinkComposedPropsâ cannot simultaneously extend types âOmit<AnchorHTMLAttributes<HTMLAnchorElement>, âhrefâ>â and âOmit<InternalLinkProps, âhrefâ | âasâ>â. Named property âonMouseEnterâ of types âOmit<AnchorHTMLAttributes<HTMLAnchorElement>, âhrefâ>â and âOmit<InternalLinkProps, âhrefâ | âasâ>â are not identical.
Expected behavior đ¤
Iâm not sure why this is happening, or what the best way to fix it is, besides also omitting 'onClick' | 'onMouseEnter'
from either NextLinkProps
or React.AnchorHTMLAttributes<HTMLAnchorElement>
.
Steps to reproduce đš
No response
Context đŚ
No response
Your environment đ
npmPackages:
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.79
@mui/icons-material: ^5.6.2 => 5.6.2
@mui/material: ^5.6.2 => 5.6.4
@mui/private-theming: 5.6.2
@mui/styled-engine: 5.6.1
@mui/system: 5.6.4
@mui/types: 7.1.3
@mui/utils: 5.6.1
@types/react: ^18.0.8 => 18.0.8
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
typescript: ^4.6.4 => 4.6.4
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "@emotion/react",
"incremental": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Issue Analytics
- State:
- Created a year ago
- Reactions:9
- Comments:5 (3 by maintainers)
Top GitHub Comments
While extending, if there same member name in multiple interfaces (
React.AnchorHTMLAttributes<HTMLAnchorElement>
andNextLinkProps
) then they must have identical data types as well.The change was introduced in https://github.com/vercel/next.js/pull/36436 in NextJS version
12.1.6
at https://github.com/vercel/next.js/pull/36436/files#diff-8acbf39f6c8f78de00c1be9339c3f839cd7f9a21f3c1d825cd23c14d4f11d718R33-R40.I think the best way would be to omit the types from
NextLinkProps
instead ofReact.AnchorHTMLAttributes<HTMLAnchorElement>
because the remaining props is being spread to Anchora
HTML element:Will create a PR soon.
@lony Is it the
onTouchStart
error? If yes, a PR has been opened for it in #33842. You can omitonTouchStart
fromNextLinkProps
.