Fails validation when changing Node to ReactNode

[nickretallack]

Input:

// @flow
import {Node} from 'react';

Output:

import { ReactNode } from 'react';

Validation error:

verification failed, diff after stripping type annotations:
- Expected
+ Received

- import { Node } from "react";
+ import { ReactNode } from "react";

The --no-recast option makes no difference. The --no-prettier option just changes the spacing around the brackets.

I'm pretty sure this didn't happen in the previous version of flowts. Should it make the import a specific type import so it doesn't confuse babel?

[zxbodya]

there is an error in an input code… - there is no Node value export in reactjs, and flow btw - just ignores it

after migration to typescript, because it is not a type import - it is not removed, and because the export name is different - it errors

Input code should be changed to:

// @flow
import type {Node} from 'react';

[nickretallack]

You mean input should be changed to ReactNode, right?

[zxbodya]

You mean input should be changed to ReactNode, right?

no - the input code should be changed to use import type, to make this work correctly

strictly speaking transformation from import { Node } from 'react'; to import { ReactNode } from 'react'; is not correct, and it is expected that validation failed

[nickretallack]

Gotcha. I wonder if the converter should even touch this line then?

What's the ideal outcome? Perhaps the converter could explain the problem?

[zxbodya]

Ideally, Flow should catch this before converting 🤣

About the possible fix, I think the best option would be to not update incorrect import, but instead - to add new correct one, so the result would be like this:

import { Node } from 'react';
import type { ReactNode } from 'react';

this would error when checked by typescript, but should be easy to fix

Another option would be to add separate transformation doing fixes in flow code before converting it to typescript - but this would be complicated(in part because of issues with flow code generation(there are some bugs)…

However, I think this should be a very rare case - have not yet seen it on the projects, I tried the converter(I did try it on a few quite big react projects), and so for now - I am considering this as a low priority.