Typescript: Unable to re-export a type with Webpack 4

[renchap]

I'm submitting a bug report
Webpack Version: 4.4.1
Babel Core Version: 7.0.0-beta.44
Babel Loader Version: 8.0.0-beta.0
Please tell us about your environment:

I am using Bable beta with the typescript preset.

In one file, I define and export a type:

// a.ts
export type MyType = "a" | "b";

In another file, I re-export this type:

// b.ts
export { MyType } from "./a.ts";

Current behavior:

The export line is not present when a.ts is compiled using Babel. The re-export line in b.ts is compiled to:

export { MyType } from "./b";

Webpack fails with this error:

    ERROR in ./app/client/utils.ts
    79:0-51 "export 'myType' was not found in './a'
     @ ./b.ts

Expected/desired behavior:

It worked fine with Webpack 3, I am not sure why.
babel should not output anything for the re-export but it does. I am not sure why Webpack 3 was not complaining about the issue, but now Webpack 4 does.

I am not sure if this should be filled in this repo, or with Webpack or Babel core. I can provide a repro if this is needed and the correct place for this issue.

[bsouthga]

potentially related: TypeStrong/ts-loader#751

[loganfsmyth]

I'm not sure this is an issue we can fix. Unfortunately TS overloads import and export to work for both types and values, so the only way to know whether to remove it would be to actually have a running TS typechecker. Unfortunately even if that were an option, Babel has no way to perform async operations like querying a server during the transformation process.

[Jessidhia]

This is also a problem you would encounter with ts-loader if you were using the --isolatedModules option, which emits code without knowledge of the types of other modules (types only used for checking, not emit).

The babel typescript transform works pretty much just like tsc's transform with --isolatedModules enabled.

---

Webpack 4 now complains about the error because this checking was added but disabled by default in webpack 3; it's just enabled by default in webpack 4.

A way of reexporting that works on both babel and typescript --isolatedModules would be this:

import { MyType } from './a'
export type MyType = MyType

but tsservice doesn't seem to treat the reexport the same as the original for purposes of go-to-definition and find usages.

[donaldpipowitch]

@andy-ms Do you have an idea how/if this can be solved by any chance? I see re-exported types in many projects, this could be quite a problem for them, if they want to use Babels TypeScript preset 🤔

[mkazlauskas]

export * from './a' seems to be working

[loganfsmyth]

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.

Since this isn't specific to babel-loader and is a general issue with TS in Babel, any further discussions should be in https://github.com/babel/babel

[ghost]

That's a compile error under --isolatedModules, which should always be set when using babel.

[donaldpipowitch]

So this means that type re-exports will never be usable with Babel, right? I think this was the only thing from our existing code base which stopped us from using Babel. 🤔

[ghost]

You can still do are-export if it's clear that you're exporting a type:

import { T as a_T } from "./a";
export type T = a_T;

You can also do export * from "./a";.

[donaldpipowitch]

I see, thank you for the first workaround!

[ubnt-marc-khouri]

@donaldpipowitch I've also had success (at least with my config) with the following, no as needed:

import { T } from "./a";
export type T = T;

edit: I see this was already mentioned in an earlier comment, that's probably where I got the idea :)

[mbrowne]

Thanks @ubnt-marc-khouri for the workaround. Note that if you're re-exporting a generic type, you have to include the parameters for it to work correctly, e.g.:

import { QueryResult } from 'somewhere'
export type QueryResult<TData, TVariables> = QueryResult<TData, TVariables>

Unfortunately if your parameters have default values, you have to repeat the same default values defined on the original type, e.g.:

export type QueryResult<TData = any, TVariables = OperationVariables> = QueryResult<TData, TVariables>

The odd thing is that this actually used to work fine with a previous version of babel-loader and webpack. In our app it was working with webpack@3.12.0, babel-loader@8.0.5, and babel-preset-react-app@7.0.2 (and no, we were not using ts-loader).

[niksumeiko]

This issue will be fixed in Typescript 3.8. They already have a merged PR microsoft/TypeScript#35200 that will introduce import type, export type keywords.

A new syntax for type-only imports and exports will look as follows:

import type T from './mod';
import type { A, B } from './mod';
import type * as Types from './mod';
 
export type { T };
export type { T } from './mod';

https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/

[Akiyamka]

@niksumeiko, that cool, but not supported by babel-loader;
export type { IGeocoder } from './types'; crush build with Unexpected token error

[petmat]

The last comment here by @Akiyamka addresses an issue I've ran into lately. I still get an Unexpected token error. Is this syntax supported or not?

export type { IGeocoder } from './types';

[dylanjeffers]

@petmat I had same issue, and updating to latest babel fixed it for me.

[iyobo]

@SapienTech to be more exact, to get this to work I had to specifically update to "@babel/preset-typescript": "^7.12.7",