Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript Warning: Export, reexported as, was not found (possible exports)

With this folder structure

├──components/
|  └─Employee/
|    └─employee.tsx
|    └─index.ts
|  └─app.tsx

I am exporting a type and a component

employee.tsx

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

index.ts

export { EmployeeState, Employee } from './employee'

When I try to import from app.tsx

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:

Employee/index.ts

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.

like image 389
Álvaro Avatar asked Sep 03 '25 02:09

Álvaro


1 Answers

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

like image 146
CWSites Avatar answered Sep 05 '25 15:09

CWSites