Repository navigation
Code sharing between multiple React projects causing TS2403 #17111
Description
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?
Activity
gudmundurp commentedon Jul 19, 2017
I had the same issue.
I found this workaround:
npm i -g @types/reactAnd then in the projects:
npm link @types/reactThis 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 commentedon Aug 29, 2017
You can always use Path Mapping (i.e.
pathsin yourcompilerOptions) to force imports of"react"to resolve to a specific package.typescript-bot commentedon Aug 3, 2019
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.