Can't export typescript types for React props - Warning "export 'FooProps' was not found in './Foo'

Describe the bug

I use typescript interfaces to prop-check my React components and I export them for later usage.

Foo.ts

export interface FooProps {
  bar: string;
}

export function Foo(props: FooProps) {
  return <div>{props.bar}</div>
}

index.ts

export { Foo, FooProps } from "./Foo";

Yields:

WARNING in ./src/components/Foo.ts 1:0-62
"export 'FooProps' was not found in './Foo'

To Reproduce Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Expected behavior A clear and concise description of what you expected to happen.

I expect to have all Typescript types available for import.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets If applicable, add code samples to help explain your problem.

System Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: Linux 3.10 Red Hat Enterprise Linux Server 7.9 (Maipo)
    CPU: (8) x64 Intel(R) Xeon(R) CPU E5-2690 v4 @ 2.60GHz
  Binaries:
    Node: 10.19.0
    npm: 6.13.4
  Browsers:
    Chrome: 81.0.4044.138
  npmPackages:
    @storybook/addon-actions: ^6.1.11 => 6.1.11 
    @storybook/addon-knobs: ^6.1.11 => 6.1.11 
    @storybook/addons: ^6.1.11 => 6.1.11 
    @storybook/react: ^6.1.11 => 6.1.11 
    @storybook/storybook-deployer: ^2.8.7 => 2.8.7 

Additional context Add any other context about the problem here.

Edit:

Typescript 3.8 released a feature to mark type-only imports/exports by type to help the elision process. https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#type-only-imports-exports

[tommyc38]

My issue was related to: https://github.com/webpack/webpack/issues/7378

I read this article: https://medium.com/javascript-in-plain-english/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb

…then updated my code from:

//libs/core/src/lib/core/directives/background.directive.ts --line 2
import  {CorColorBackgroundType } from '@umbrelo/data';

To:

//libs/core/src/lib/core/directives/background.directive.ts --line 2
import type {CorColorBackgroundType } from '@umbrelo/data';

Now the warning is gone.

[AndyOGo]

Typescript 3.8 released a feature to mark type-only imports/exports by type to help the elision process. https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#type-only-imports-exports