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