React Typescript Circular Dependence and import

Question

I have a union type setup in the parent

export type Students = "fresher" | "secondYear" | 'finalYear' | 'postGrad';

Causing a circular dependency, now the obvious solution is to define this type in an external file. Is there a work around where the child can determine what is passed without having to import and define the type again in the props?

Edit sandbox here

https://codesandbox.io/s/adoring-thunder-b6f66t?file=/src/StudentView.tsx

This is not an issue in codesandbox but the circular dependency is in my eslint.

Answer 1

Your problem is typo mistake. Your type is called Students not Student

type Props = {
    student: Student**s**,
};

and then when importing type also

import { Student**s** } from "../content/StudentView";