npmreactjs95% confidence\u2191 25

Typescript inferred type cannot be named without reference

Full error message
My project's setup is tsdx (based on Rollup and Typescript).

Working in my IDE (vscode) everything looks fine, and even running yarn tsc works without errors.

When I'm running yarn build (which is tsdx build) I get the following error:

(typescript) Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.

The code referenced in the error is:

type AlertContainerProps = {
  theme: any
};
const AlertContainer = styled(animated.div)<AlertContainerProps>`
  ${(props) => props.theme.primaryView}
  ...
`;

...

type AlertContentProps = Pick<React.ComponentProps<typeof AlertContainer>, 'style'> & {
  status?: string
};

What am I doing wrong? How can I fix it?

I tried this solution but it didn't work.

This issue occurs when you are exporting a function whose return type could not be inferred by TypeScript For example, consider the code snippet const foo = async () => { const data = someExternalLibary.doStuff(); return data; }; If TypeScript throws the following error:- The inferred type of `foo` cannot be named without a reference to `../node_modules/someExternalLibary`. This is likely not portable. A type annotation is necessary. this means that TS is saying that someExternalLibary.doStuff()'s return type could not be inferred because the return type of doStuff is not exported by someExternalLibrary library So what's solution? just add the type annotation to data. Say, required type annotated is DoStuffReturnType const foo = async () => { const data: DoStuffReturnType = someExternalLibary.doStuff(); // Add type annotation to `data` return data; }; Now you should be good to go!

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/61b40222a80d435f0cc7b8ea9ce26404d941892aff093cda02ebc3afb5c71c99
hash \u00b7 61b40222a80d435f0cc7b8ea9ce26404d941892aff093cda02ebc3afb5c71c99
Typescript inferred type cannot be named without reference — DepScope fix | DepScope