Typescript inferred type cannot be named without reference

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!

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 }) => ({ .......

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

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

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