CODEWITHSUNDEEP
typescriptecmascript-6es6-modules
Dune
Dune

Reputation: 694

Re-exporting named typescript interface throws error

I have and issue with re-exporting named typescript elements.

I have a react file similar to this:

CustomComponent/CustomComponent.tsx:

export interface CustomComponentProps { ... }

const CustomComponent: React.FunctionComponent<CustomComponentProps> = () => {
  ...
}
export default CustomComponent

CustomComponent/index.ts:

import CustomComponent from './CustomComponent'
export { CustomComponentProps } from './CustomComponent'

export default CustomComponent

The error message is as follows:

Attempted import error: 'CustomComponentProps' is not exported from './CustomComponent'.

or

import CustomComponent from './CustomComponent'
import { CustomComponentProps } from './CustomComponent'

export default CustomComponent
export CustomComponentProps

Where the error message is:

Parsing error: Declaration or statement expected

CustomComponent/index.ts when it works fine:

import CustomComponent from './CustomComponent'
export * from './CustomComponent'

export default CustomComponent

What may be the cause of this error and how to fix it to use export like (or similar) to the failing example? The format of an export is important because there's a need to have a control over what's exported from index.ts.

Upvotes: 1

Views: 1562

Answers (2)

Lewy Blue
Lewy Blue

Reputation: 618

You will need to convert this to a type before re-exporting. This should work:


export type { CustomComponentProps } from './CustomComponent'

Upvotes: 2

Dune
Dune

Reputation: 694

I somehow managed to solve my issue while writing this question, so I share the solution, since I haven't found anywhere similar problem:

import CustomComponent from './CustomComponent'
import {
  CustomComponentProps as CustomComponentPropsOriginal
} from './CustomComponent'

export default CustomComponent
export interface CustomComponentProps extends CustomComponentPropsOriginal {}

Upvotes: 1

Related Questions