With this folder structure
├──components/
| └─Employee/
| └─employee.tsx
| └─index.ts
| └─app.tsx
I am exporting a type and a component
import React, { FC } from 'react'
export type EmployeeState = {
Name: string
EmployeeId: number
}
type EmployeeProps = {
employees: EmployeeState[]
}
export const Employee: FC<EmployeeProps> = ({ employees }) => {
return (
<ul>
{
employees.map((employee) => (
<li key={employee.EmployeeId}>
<h2>{employee.Name}</h2>
</li>
))
}
</ul>
)
}
And then exporting from index.ts
on the Employee
folder
export { EmployeeState, Employee } from './employee'
When I try to import from app.tsx
...
import { EmployeeState, Employee } from '@components/Employee'
...
I get this warning from TypeScript:
WARNING in ../src/components/Employee/index.ts 4:0-53
`export 'EmployeeState' (reexported as 'EmployeeState') was not found in './employee' (possible exports: Employee)`
I was able to fix the warning by making this change:
Old:
export { EmployeeState, Employee } from './employee'
New:
export * from './employee'
But I still do not understand why it would not work the other way around.
I also had this issue and after some more digging found this GitHub Issue which goes into detail if interested: https://github.com/webpack/webpack/issues/7378#issuecomment-683894656
Either way the solution is that your type
needs to be exported differently. Updating your code to the following should fix your issue.
export { Employee } from './employee'
export type { EmployeeState } from './employee'
You can also do the following, thanks @bmacher for the comment!
export { Employee, type EmployeeState } from './employee'
If you care to read more about the how and why behind this, here is a good article: https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With