Code sharing between multiple React projects causing TS2403

[borismus]

TypeScript Version: 2.4.1

Code

import B from '../../../other_project/src/ui/B';

export default class A extends React.Component<IProps, IState> {
  render() {
    return (
      <B/>
    )
}

Expected behavior:

I'm able to import a React component from one React project to another.

Actual behavior:

Hundreds of errors like these ones:

ERROR in .../node_modules/@types/react/index.d.ts
(3481,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'track' must be of type 'DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>', but here has type 'DetailedHTMLProps<TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>'.

ERROR in .../node_modules/@types/react/index.d.ts
(3482,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'u' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

ERROR in .../node_modules/@types/react/index.d.ts
(3483,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'ul' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>'.

I think what's happening is that both A and B depend on React, but somehow TypeScript gets confused since they are in different projects. If B is in the same project, no issue at all. But when it's in another project, the build ends up with two React typings files, and it sees them as a redefinition. Any workarounds to this problem?

[gudmundurp]

I had the same issue.

I found this workaround:

npm i -g @types/react

And then in the projects:

npm link @types/react

This solved the issue for me ... and seems alright as long as you are using the same version of the type definitions everywhere. The only caveat I can think of is that you have to consciously remember to update the version in package.json everywhere whenever you want to use a newer version of the package.

[DanielRosenwasser]

You can always use Path Mapping (i.e. paths in your compilerOptions) to force imports of "react" to resolve to a specific package.

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.