Custom TypeScript type from React imported library not recognized?

Question

I am attempting to use a third party family tree library (react-family-tree) in my React TypeScript project.

The family tree wants an array with among other values, a value in the Gender type from its dependency library relatives-tree

I have imported the library like so:

import ReactFamilyTree from 'react-family-tree';

And am attempting to create the Gender type in the array with the below code:

var ancestorsFormatted: Array<{ id: number, gender: Gender, parents: {id: number}[], children: {id: number}[], spouse: {id: number}[]}> = [];

However, I am given the error of Cannot find name 'Gender'

I thought that importing this library would also make its types usable, do I also need to import the dependency library? I tried doing so with a variety of syntaxes but it is not recognized.

"I thought that importing this library would also make its types usable" no, you have to import types explicitly just like values. — Jared Smith
– Jared Smith, Commented Dec 2, 2022 at 19:42

Tiddo · Accepted Answer · 2022-12-03 12:18:13Z

2

import ReactFamilyTree from 'react-family-tree' only imports the default export from react-family-tree, which is not the Gender. You'll need to import Gender itself from somewhere.

If that's in the library relatives-tree, then this will likely be something like

import { Gender } from 'relatives-tree'.

You'll need to check the documentation/source though to understand exactly where you can find the Gender type.

Update: in this specific case, the Gender type seems to be exported from relatives-tree/lib/types, so the import statement should be:

import { Gender } from 'relatives-tree/lib/types'

edited Dec 3, 2022 at 12:18

answered Dec 2, 2022 at 19:40

Tiddo

6,5637 gold badges57 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

8times9 Over a year ago

I used your import statement you recommended but React complained that relatives-tree doesn't have an exported member named Gender. I looked through its source code and found a file named types.ts with an entry export const enum Gender { male = 'male', female = 'female', } -- any idea how to adjust my import statement for it?

Tiddo Over a year ago

I had a look at the library, and it seems you'll need to have import { Gender } from 'relatives-tree/lib/types'. I found this by installing the package in my project, and then in node_modules/relatives-tree I found the lib folder with the compiled types file.

Collectives™ on Stack Overflow

Custom TypeScript type from React imported library not recognized?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related