Typescript/React: Module has no exported member

Question

I am trying to export prop types from one view component to another container component and use them as state type definitions:

// ./Component.tsx
export type Props {
    someProp: string;
}

export const Component = (props: Props ) => {
    ...etc
}

// ./AnotherComponent.tsx
import { Component, Props as ComponentProps } from "./Component";

type Props = {}

type State = ComponentProps & {};

class AnotherComponent extends React.Component<Props, State> {
    state: State;
    ...etc
}

However I am getting in console:

Module '"./Component "' has no exported member 'Props'.

Any suggestions for how I should be going about this?

I have also tried using lookup types as per this article, but no joy.

Module '"./AnotherComponent "' has no exported member 'Props'. but Module "./Component" has exported member 'Props'. cheers — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Apr 10, 2019 at 10:22

Alex · Accepted Answer · 2019-04-10 13:00:56Z

5

The issue for the missing member export was the fact that I had an intermediary index file which TypeScript doesn't seem to be able to use when exporting types:

// ./Component/index.tsx
export { Component, Props } from "./js/Component";

When I change the import to use an exact path to the file rather than trying to import it through the index file it picked it up:

// ./AnotherComponent/js/AnotherComponent.tsx
import { Props as ComponentProps} from "./Component/js/Component";

answered Apr 10, 2019 at 13:00

Alex

2,8203 gold badges30 silver badges50 bronze badges

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

Comments

score 1 · Accepted Answer · 2019-04-10 10:45:49Z

1

Try something like this. Basically extend the component Props, to include your desired import.

export interface IProps extends PropsOfYouChoiceThatYouImport {
 morePropsHere
}

Also do not include Props into State it is completly wrong IMO. Do something like this:


interface IProps extends YourDesiredProps {
  someProp: string | null;
  // etc
}

interface IState {
  something: boolean
  // etc
}

export class ComponentName extends Component<IProps, IState> {
  // Define you state, and props here. You need to initialize the correct IState 
  // and IProps above
}

As for the console error, I am not sure you can do that.Try create a folder called Types or Interfaces. Then export that one.

And import it as named or default export, whatever you wish, at both files. Since you want to reuse it. Tell me if it helps. I can look more into it, if you make a quick codeSandbox..

Basically what I suggest is put this into a separate file:

export type Props {
    someProp: string;
}

edited Apr 10, 2019 at 10:45

answered Apr 10, 2019 at 10:33

user10104341

4 Comments

Alex Over a year ago

Thanks, however this doesn't resolve the error above. Also I am guessing the props can only extend one other set of props, if I need to include more than one set of props this would be unsuitable right?

user10104341 Over a year ago

You can extend mutiple ones. just comma seperate them. But be careful. Incompatibly types are a headache to solve. If you find yourself in that scenario, maybe your architecture is wrong. Let me look at the error again. Maybe I misunderstood the problem.

user10104341 Over a year ago

Please check my answer again. Tell me if it helps.

Alex Over a year ago

Thanks, according to github.com/sw-yx/react-typescript-cheatsheet#class-components it says " you can export/import/extend these types/interfaces for reuse.", surely there is a way to reuse these types without having to separate into a different type definitions file?

andris.vilde · Accepted Answer · 2019-04-10 10:57:26Z

1

If you check the React typings (node_modules/react/index.d.ts) of React.Component the structure is the following:

class Component<P, S> {...}

where P equal props and S means state. You should not mix props and state.

To fix your TypeScript error change type to interface:

export interface Props {
  someProp: string;
}

answered Apr 10, 2019 at 10:57

andris.vilde

1885 bronze badges

2 Comments

Alex Over a year ago

Changing it to interface doesn't work unfortunately.

andris.vilde Over a year ago

It is quite difficult to guess what is the issue therefore I suggest you reproduce your issue in codesandbox.io which is a great online coding tool for front-end. Here is a sand box you can fork which has Typescript and React.

Kyrylo Tretiakov · Accepted Answer · 2024-10-23 08:25:46Z

0

When installing react-datepicker, make sure to use the following command:

npm install react-datepicker --legacy-peer-deps

This option resolved the dependency issues for me. If you're facing similar problems, I highly recommend trying it out! It helps maintain compatibility with older peer dependencies while installing.

edited Oct 23, 2024 at 8:25

answered Oct 23, 2024 at 8:24

Kyrylo Tretiakov

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Typescript/React: Module has no exported member

4 Answers 4

Comments

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related