Unable to re-export imported interfaces

[ffxsam]

Version

3.0.0-rc.9

Node and OS info

Node 8.10.0, Yarn 1.7.0, macOS 10.13.6

Steps to reproduce

Reproduction: https://github.com/ffxsam/repro-reexport-warning

Export an interface from file A, import it into file B, then re-export it from file B.

What is expected?

It should work with no warnings or errors.

What is actually happening?

Warnings are thrown.

[ffxsam]

 WARNING  Compiled with 1 warnings                                      17:21:23

 warning  in ./src/main.ts

"export 'Thing' was not found in './test'

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.11.11:8081/

No type errors found
No lint errors found
Version: typescript 2.9.2, tslint 5.11.0

[yyx990803]

You are exporting Thing - this is using it in a non-type-annotation position and thus cause it to be kept in emitted code - and causes webpack to attempt to look it up.

This has nothing to do with Vue CLI.

[ffxsam]

@yyx990803 I've searched far & wide on how to import an interface and re-export is, and found nothing. I assumed it was a Vue CLI issue since VS Code shows no warnings, and there are no TypeScript errors or TSLint issues either.

What is the correct way to import/re-export interfaces and types?

[yyx990803]

If you export an interface but not use it, TypeScript cannot safely remove the interface from emitted code.

Exporting it from main.ts doesn't make sense because you are not shipping raw TS.

[ffxsam]

You're right, once I didn't export from main.ts, it's fine.

But then I don't understand why this code (my actual code) fails:

 warning  in ./src/store/index.ts

"export 'AuthState' was not found in './modules/auth'

src/store/modules/auth/index.ts

export interface AuthState {
  email: string | null;
  firstName: string | null;
  lastName: string | null;
  loggingIn: boolean;
  loggingOut: boolean;
  orgId: number | null;
  orgName: string | null;
  refreshToken: string | null;
  token: string | null;
  userId: string | null;
  [key: string]: any;
}
// ...
export default module;

src/store/index.ts

import auth, { AuthState } from './modules/auth';
// ...
export { AuthState };
export default store;

src/views/TagList.vue

<script lang="ts">
import Vue from 'vue';
import { AuthState } from '@/store';
// ...

If this is not a Vue issue, maybe you could tell me the proper place to report this, because it definitely seems like a bug somewhere in the chain.

[ffxsam]

@yyx990803 There are some serious bugs in Vue + TypeScript. Here's another one:

https://stackoverflow.com/questions/51661909/how-to-get-unit-tests-in-vue-to-stop-going-up-the-import-hierarchy

There's a reproduction repo in there. Try it out, and you'll see that the thrown Jest error makes no sense. I created a plain JS project and used the exact same code (minus the TS annotations of course), and the test ran fine.

I have a feeling this is an edge case, related to this issue with re-importing types. If this is a Vue bug, let me know and I'll re-file this issue under the Vue repo.

[haoqunjiang]

@ffxsam
See #1895
Fixed in a352bdc
Shipped in rc.6
Please update your tsconfig.json

[ffxsam]

@sodatea Thank you, that fixed it!

[ffxsam]

@sodatea Though, changing this setting introduced new errors:

ERROR in /Volumes/SuperData/Sites/onspot/onspot-v2-ui/src/store/modules/settings/maintenance.ts
1:8 Module '"/Volumes/SuperData/Sites/onspot/onspot-v2-ui/node_modules/moment/moment"' has no default export.
  > 1 | import moment from 'moment';

Synthetic imports was addressing this. Do I now have to do import * as moment from 'moment' everywhere in my codebase?

[ffxsam]

import * as moment from 'moment' also fails:

A namespace-style import cannot be called or constructed, and will cause a failure at runtime.

[haoqunjiang]

@ffxsam
That's weird.
Per the TypeScript documentation, turning on esModuleInterop will automatically enable allowSyntheticDefaultImports for type system compatibility.
But this issue does get fixed by re-enable this option…

[ffxsam]

@sodatea I just submitted a new issue: #2062

[ffxsam]

It was a bug in the TS documentation: microsoft/TypeScript-Handbook@8e974c8

So allowSyntheticDefaultImports must remain true in the TS template tsconfig.json.