Typescript inferred type cannot be named without reference

Question

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.

Answer 1

When running the script "build" in monorepo NestJS and NextJS I got this error:

Type error: The inferred type of 'trpc' cannot be named without a reference to '../../server/node_modules/@trpc/server/dist'. This is likely not portable. A type annotation is necessary.

Client side:

import { AppRouter } from '@server/trpc/trpc.router';

export const trpc =
  createTRPCProxyClient<AppRouter>({
    links: [
      //TODO: use env variable
      httpBatchLink({ url: `http://localhost:5000/trpc` }),
    ],
  });

Server side:

...
export type AppRouter = TrpcRouter['appRouter'];

Apparently the client-side error was caused by Typescript trying to import AppRouter as a function rather than as a type.

Adding the settings to the root tsconfig.json file helped solve the problem:

{
  "compilerOptions": {
    "preserveSymlinks": true
  }
}

The solution to the problem is taken from here: https://lightrun.com/solutions/microsoft-typescript-the-inferred-type-of-x-cannot-be-named-without-a-reference-to-y-this-is-likely-not-portable-a/

Answer 2

In case you are the one who created the npm package

Possible problem reason

I had this issue because I created an npm package and didnt export some internal types. typescript couldnt infer the types because it had no access to it.

Solutions

• 1st solution, Modify the function signature to use exported types only, so it doesnt rely on type infering.
• 2nd solution, If you want to rely on infer then modify the npm package to export the internal types

Answer 3

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!

Answer 4

Typescript needs a reference for that type so put this at the top of the file that is causing the error:

/// <reference types="@emotion" />

Answer 5

This helped me

import { StyledComponent } from '@emotion/styled';
import type { BoxProps } from '@mui/material/Box';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';

export const BoxStyled: StyledComponent<BoxProps> = styled(Box)(({ theme }) => ({ .......