[@types/react] - Exported variable 'DrawerHeaderStyled' has or is using name 'UNDEFINED_VOID_ONLY' from external module "XXX/node_modules/@types/react/canary" but cannot be named.

[trkas]

Hi,

I have a problem with using @types/react.

I have a Next.js project that I publish to npm. I have a simple Component that I export from the library.

I have following styled Material component:

`// material-ui
import { styled, Theme } from "@mui/material/styles";
import { Box } from "@mui/material";

// ==============================|| DRAWER HEADER - STYLED ||============================== //

interface Props {
theme: Theme;
open: boolean;
}

const DrawerHeaderStyled = styled(Box, {
shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }: Props) => ({
...theme.mixins.toolbar,
display: "flex",
alignItems: "center",
justifyContent: open ? "flex-start" : "center",
paddingLeft: theme.spacing(open ? 3 : 0),
}));

export default DrawerHeaderStyled;`

When i run npm run build it comes with error :

./app/layout/MainLayout/Drawer/DrawerHeader/DrawerHeaderStyled.ts:13:7 Type error: Exported variable 'DrawerHeaderStyled' has or is using name 'UNDEFINED_VOID_ONLY' from external module "/Users/trkas/VSCodeProjects/ng-frontend/node_modules/@types/react/canary" but cannot be named.

I have found out that using @types/react version before 18.2.69 doesn't produce this error, so any ideas on how to avoid this error with latest version(s)?

[typescript-bot]

Thanks for the discussion about "react", some useful links for everyone:

• npm
• DT
• Related discussions

Pinging the DT module owners: @johnnyreilly, @bbenezech, @pzavolinsky, @ericanderson, @DovydasNavickas, @theruther4d, @guilhermehubner, @ferdaber, @jrakotoharisoa, @pascaloliv, @Hotell, @franklixuefei, @Jessidhia, @saranshkataria, @lukyth, @eps1lon, @zieka, @dancerphil, @dimitropoulos, @disjukr, @vhfmag, @hellatan, @priyanshurav, @Semigradsky, @mattpocock.

[ghost]

Should be fixed by #69341 I guess.

[rafalnawojczyk]

The PR which @codershiba mentioned here should fix this issue, but that type shouldn't really be used outside of types package, as it's internal type.

If any of you encounters the same problem - I will wrote what helped us. We've had this error only one one file - it was a react custom hook that was using some types.
Problem was that the type which he was using was extending React.FC<>. Apparently you cannot pass React.FC types to custom hook as it produces this error.