The inferred type of "X" cannot be named without a reference to "Y". This is likely not portable. A type annotation is necessary.
Problem
Bug Report 🔎 Search Terms inferred type cannot be named, symlink node_modules 🕗 Version & Regression Information I'm verifying the problem on the `typescript@4.1.3`. I've not tried older versions but at least is also reproducible on the `@next` version as of today. It is probably a regression or a corner case related with other issues opened and already closed like: - https://github.com/microsoft/TypeScript/issues/30858 - https://github.com/microsoft/TypeScript/issues/28689 - https://github.com/microsoft/TypeScript/issues/2338 - https://github.com/microsoft/TypeScript/issues/29221 ⏯ Playground Link Link for a repo where the problem is being reproduced > NOTE: Just clone the repo and run `yarn tsc` 💻 Code All the relevant code can be found at https://github.com/mistic/reproduce-typescript-problem-when-symlinking-node_modules It is just reproducing a similar setup that I had on other project that was generating the problem: - node_modules are a symlink to another location that is not a direct parent of the symlinked node_modules - we are using types in the compilation from a library where those types are just exported from other one, like for example `withRouter` within `react-router-dom` that is just a plain export from the same type on `react-router`. 🙁 Actual behavior I got the following error: [code block] 🙂 Expected behavior I was expecting no error at all and that the typescript compiler was just able to find all the respective modules. I've tried ev
Error Output
error TS2742: The inferred type of 'Nav' cannot be named without a reference to '../../deps/node_modules/@types/react-router'. This is likely not portable. A type annotation is necessary.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Add Type Annotations to Resolve Inferred Type Issues
The error occurs because TypeScript cannot infer the type of 'Nav' without a direct reference to the types defined in the symlinked node_modules. This happens when types are exported from a library that is not directly accessible due to the symlink structure, leading to portability issues.
Awaiting Verification
Be the first to verify this fix
- 1
Identify the Component with Inferred Type Issue
Locate the component (e.g., 'Nav') that is causing the type inference error in your codebase. This is typically where you are using types from a library that is symlinked.
typescriptconst Nav = withRouter(MyComponent); - 2
Add Explicit Type Annotations
Modify the component definition to include explicit type annotations for the props or the component itself. This will help TypeScript understand the types without relying on inference.
typescriptconst Nav: React.FC<MyComponentProps> = withRouter(MyComponent); - 3
Check TypeScript Configuration
Ensure that your tsconfig.json is correctly set up to include the necessary type definitions from the symlinked node_modules. Verify that 'typeRoots' and 'paths' are configured properly.
json{ "compilerOptions": { "typeRoots": ["./node_modules/@types", "../../deps/node_modules/@types"] } } - 4
Rebuild the Project
After making the changes, rebuild your TypeScript project to ensure that the new type annotations are recognized and the error is resolved.
bashyarn tsc - 5
Test the Application
Run your application to ensure that the changes did not introduce any new errors and that the component behaves as expected.
bashyarn start
Validation
Confirm that the TypeScript compiler no longer throws the TS2742 error for the 'Nav' component. Additionally, ensure that the application runs without issues and the component is functioning correctly.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep