Need help fixing or suppressing this TypeScript error: TS2742

Question

I have this file in a react native project:

import styled, { withTheme } from 'styled-components';
import { BaseText } from '../BaseText';

export interface BodyProps {
  textAlign?: string;
  fontSize?: string;
}

export const Body = withTheme(styled(BaseText)<BodyProps>`
  text-align: ${props => (props.textAlign ? props.textAlign : 'center')};
  font-size: ${props => (props.fontSize ? props.fontSize : '16px')};
`);

I upgraded react native from 0.61.5 to 0.63.2 and started getting this lint error wherever withTheme is being used:

TS2742: The inferred type of 'Body' cannot be named without a reference to 'react-native/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.

I tried several things, but the error remains the same:

1. Following this post, I added import React from "react";
2. Tried to disable tslint by adding /* tslint:disable */ above the Body declaration
3. Tried to disable tslint by adding // tslint:disable-next-line above the Body declaration
4. Played with dependency versions. Currently I have "@types/react": "^16.9.49".

Paprika

You have duplicate types that's what it means. Look at the path, its a nested node_modules directory in node_modules/react-native/ You have conflicting dependencies – Santiago

@AluanHaddad thanks, but there is no @types directory inside node_modules/react-native/ – Paprika

That's weird. Remove node_modules and package-lock.json or whatever the lockfile is for your package manger and reinstall all dependencies – Santiago

Answer 1

Alternately, check your package-lock.json and yarn.lock -- are there multiple @types/react versions listed there? Try changing your package.json to have the same @types/react version as what react-native lists as a dependency.

It could be that you have multiple versions of the @types/react React typings, and the components are getting confused about which one to import from.

Lewiss

Answer 2

By "a reference", TypeScript means the specific project you're working on doesn't have a (regular/dev/peer/optional) dependency in its package.json. You might be relying on a neighboring package to declare the dependency, or have coincidentally installed globally on your computer.

To resolve this, add @types/react as a devDependency to your package.json and install with your package manager of choice. That will satisfy TypeScript because it'll guarantee your package definitely has a reference to the (React) types it needs -- not just coincidentally.

npm i @types/react --save-dev
yarn add @types/react -D

---

We should also note that "tslint" and tslint:disable refer to TSLint, a now-deprecated tool which is not the same as TypeScript. TSLint is a separate library that adds extra static analysis ("linting") onto TypeScript code. Put another way, TSLint is to TypeScript as ESLint is to JavaScript.

The error you're seeing is a TypeScript error, not a TSLint one.

Lewiss

Thanks for your answer. I already have that devDependency as mentioned in the last line of my question. Thank you for explaining why tslist:disable isn't working. – Paprika

Are you sure it's installed (npm i / yarn)? :) Note the file path, react-native/node_modules/@types/react -- for some reason, TypeScript thinks your @types/react is from a sub-module, not your direct listed dependency. – Lewiss

Answer 3

The withTheme function returns a value of a specific type. In your case, TypeScript fails to properly infer this type which is why you get error TS2742.

You can fix the problem by adding an explicit type annotation to const Body. It will look somewhat like this (depending on your version of styled-components):

import styled, { withTheme, WithThemeFnInterface } from 'styled-components';

export const Body: WithThemeFnInterface<{}> = withTheme(styled(BaseText)<BodyProps>`...`

Cervelat