Unable to migrate from create-react-app-typescript

[borisyordanov]

Is this a bug report?

Yes, but i'm not sure if the bug is caused by CRA

Did you try recovering your dependencies?

npm --version
6.4.1

Which terms did you search for in User Guide?

https://github.com/facebook/create-react-app/blob/49e258b4a6d04fb7e3542d7a060c6dcad4093564/docusaurus/docs/adding-typescript.md

Environment

npx create-react-app --info doesn't work. It's an open issue - #5757

I'm using Windows 10 though.

Description of bug

I've been trying to refactor a create-react-app-typescript app by following the blog post recommended in the docs - https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/

After i went through the steps and started the app i got this error:

Type error: Type '(value: number | Range) => void' is not assignable to type '(value: number | import("bla-bla/node_modules/react-input-range/react-input-range").Range) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'number | import("bla-bla/node_modules/react-input-range/react-input-range").Range' is not assignable to type 'number | Range'.
      Type 'Range' is not assignable to type 'number | Range'.
        Type 'import("bla-bla/node_modules/react-input-range/react-input-range").Range' is not assignable to type 'Range'.
          Property 'commonAncestorContainer' is missing in type 'Range'.  TS2322

this is the method that triggers it:

public changeRangeValue = (type: string) => (value: Range | number) => {
	if (value instanceof Range) {
		return;
	}
	this.handleValueChange(type, value);
};

and this is the component that uses the method

import InputRange from 'react-input-range';
<InputRange
    value={homeValue}
    onChange={this.changeRangeValue('homeValue')}
/>

For some reason the app is trying to import Range from one of the libraries i'm using

import("C:/Users/by/Desktop/Projects/maqan-frontend/node_modules/react-input-range/react-input-range").Range

instead of using the appropriate TS interface.

Does anyone know why this is happening and how it stop it?

N.B. This app, with the same packages is working fine with react-scripts-ts, this bug started when i migrated to react-scripts

[Timer]

Try setting skipLibCheck: true in your tsconfig.json.

[borisyordanov]

@Timer skipLibCheck was already true. It didn't help with this issue

[deftomat]

If i remember it correctly, create-react-app-typescript is using ts-loader which sets the following tsconfig flags for you:

esModuleInterop: true,
allowSyntheticDefaultImports: true

Not sure, if it can help, but it could be a difference.

[borisyordanov]

@deftomat Yes you're right, CRA-TS is using ts-loader, but the article mentioned in the CRA migration docs recommends deleting the tsconfigs and letting CRA create the default tsconfig (which is what i did). Changing those flags between true and false seems to have to effect :(

[deftomat]

@borisyordanov Is it possible to create minimal repro?

[borisyordanov]

@deftomat I'll give it a go. I was hoping it was something obvious and you guys might be able to point me in the right direction.. I'll get back to you with a repo.

[koebeen]

you might have two versions of the same dependency installed. in that case you can add a resolutions entry in your package.json

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.