[bug] flags non-type-only imported type as unknown import

[vegerot]

Version

4.5.11

Reproduction link

https://github.com/vegerot/vue-cli-6320

https://github.com/vuejs/vue-cli/issues/3145#issuecomment-785268090

Environment info

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 15.10.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.47
    Edge: Not Found
    Firefox: 78.8.0
    Safari: 14.1
  npmPackages:
    @types/vue-moment: 4.0.2 => 4.0.2 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.3 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.11 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.11 
    @vue/cli-plugin-babel: 4.5.11 => 4.5.11 
    @vue/cli-plugin-e2e-cypress: 4.5.11 => 4.5.11 
    @vue/cli-plugin-eslint: 4.5.11 => 4.5.11 
    @vue/cli-plugin-pwa: 4.5.11 => 4.5.11 
    @vue/cli-plugin-router: 4.5.11 => 4.5.11 
    @vue/cli-plugin-typescript: 4.5.11 => 4.5.11 
    @vue/cli-plugin-unit-jest: 4.5.11 => 4.5.11 
    @vue/cli-plugin-vuex: 4.5.11 => 4.5.11 
    @vue/cli-service: 4.5.11 => 4.5.11 
    @vue/cli-shared-utils:  4.5.11 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-standard:  6.0.0 
    @vue/eslint-config-typescript:  7.0.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils:  1.1.3 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue:  7.6.0 
    jest-serializer-vue:  2.0.2 
    js-cookie-vue: 1.0.8 => 1.0.8 
    typescript: 4.1.5 => 4.1.5 (3.9.9)
    vue: 2.6.12 => 2.6.12 
    vue-class-component: 7.2.6 => 7.2.6 
    vue-cli-plugin-moment: 0.1.1 => 0.1.1 
    vue-cli-plugin-vuetify: 2.1.0 => 2.1.0 
    vue-eslint-parser:  7.5.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest:  3.0.7 
    vue-loader:  15.9.6 (16.1.2)
    vue-moment: 4.1.0 => 4.1.0 
    vue-property-decorator: 9.1.2 => 9.1.2 
    vue-router: 3.5.1 => 3.5.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: 2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuedraggable: ^2.24.3 => 2.24.3 
    vuetify: 2.4.4 => 2.4.4 
    vuex: 3.6.2 => 3.6.2 
    vuex-class: 0.3.2 => 0.3.2 
  npmGlobalPackages:
    @vue/cli: 4.5.11

Steps to reproduce

Copy/paste the code from https://github.com/vuejs/vue-cli/issues/3145#issuecomment-785268090

Run vue-cli-service serve

What is expected?

Get no warnings in the console

What is actually happening?

---

Please read https://github.com/typescript-eslint/typescript-eslint/issues/3108#issuecomment-785414796 and https://github.com/vuejs/vue-cli/issues/3145#issuecomment-785268090

[LinusBorg]

Copy/paste the code from #3145 (comment)

Asking us to generate a project with your listed dependencies (hopefully with the right options that you chose), copy-paste code (hopefully in the right place, hopefully using dependencies correctly) - that's not a runnable reproduction.

Please respect the issue guidelines and provide a runnable reproduction.

[vegerot]

@LinusBorg apologies. Will do

[vegerot]

Link to reproduction repo: https://github.com/vegerot/vue-cli-6320

@LinusBorg should I make a new issue, or continue using this one?

[vegerot]

@LinusBorg I see you tagged this as "needs team repro". Is there anything I can do to help with that?

[LinusBorg]

that tag means that a team member has to check out your repro. You can only way that someone can pick it up. I won't be able to look into this as I have a few other bases to cover.

[vegerot]

@LinusBorg it's been a few months now and this bug is preventing our team from upgrading ESLint and TypeScript. I'm wondering what I can do to help get this fixed. Do you have a project board where you are tracking the order these issues get completed in?

[LinusBorg]

Hi @vegerot,

thanks for the patience. I couldn't make the time back then to look into it, and thing get drowned out quickly.

I ran your reproduction repository and couldn't reproduce the error/warning in question, neither during serve nor build:

Is there anything special I need to do?

Edit: I was able to get the error switching import type to import. But with import type I don't get any eslint errors.

I also read the discussion in the typescript-eslint repo, but personally can't claim to have fully understood - I don't really use decorators and have zero knowledge about decorator metadata and the intricacies of that.

Do these warnings only happen for the decorators you are using from vuex-class, though? Maybe the issue is to be found there - that lib hasn't been updated in 3 years, maybe something needs to be updated - TS upgrades have a tendency to break stuff even in minor releases as well. Taking into account that this type of problem hasn't been reported by other users of vue-class-component or vue-cli, my suspicion would be in that direction.

If you can help come up with a reproduction that actually demonstrates the problem, and provided that it's only happening for the decorators from @vuex-class, I'd ask you to open an issue there and I'll ping its maintainer, ktsn - he's a team member.

I don't really see an early indication how/where this can be solved on vue-cli's end, as we don't do anything fancy with TS - vue-loader delegates compilation of TS code to the ts-loader and outputs that result as-is. But #3145 shows there are multiple of these instances, though they seem rare (It's hard to judge which scenarios are affected as you are the first person in over 2 years to actually submit a reproduction).

[vegerot]

@LinusBorg let me explain a bit more clearly the issue:

If I use import type, typescript-eslint complains that I should be using import instead.

If I use import, vue-cli complains that export "foo" was not found in 'bar'

[LinusBorg]

I understand that.

But for me, eslint complains when I use import, and doesn't when I use import type:

import:

import type:

...and when using import type, everything builds fine, too, and don't get any eslint warnings when running npm run lint or anything.

So I can't really reproduce the problem with the repo you provided.

[vegerot]

I may need to update eslint in the demo repo

[vegerot]

@LinusBorg my apologies. I have updated the dependencies to reflect the bug

[LinusBorg]

Thanks, that makes it reproducible in the way you describe it.

So, I'll try and recap the situation:

Typescript/Build warnings about exports not being found

1. These kinds of issues seem to have a long and complicated history.
2. They have affected and do affect not only Vue-CLI but CRA and Angluar projects as well, judging from the discussions in the linked issues (and sublinked ones)
3. While there seem to have been various attempts at fixing them in tooling, there seem to be edge cases that continue to come up.
4. The underlying issue seems to be resolvable by either using import type ... for the affected type imports or emitDecoratorMetaData: false in tsconfig.json.
5. You currently can't use the former because typescript-eslint misinterprets it as an error
6. You (presumably) can't use the latter because your codebase relies on it (even though it seems to have no negative effect in the reproduction repo).

typecript-eslint warnings

1. This warning happens when using import type ... syntax
2. This warning is incorrect, as the use of this syntax is working fine, but typescript-eslint isn't able to detect that properly (See https://github.com/typescript-eslint/typescript-eslint/issues/3108#issuecomment-785414796).
3. This bug could be worked around by disabling the rule when the reason given is: "Type import "ActionMethod" is used by decorator metadata":

/* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
import type { ActionMethod } from 'vuex';

outside of these options, I wouldn't count on a quick resolution of this issue given its wider history, and I would presume that it's not something we can fix in Vue-CLI itself anyway.

Not sure where to go next, TBH.

@ktsn Have you come across problems like these, maybe?

[vegerot]

4. The underlying issue seems to be resolvable by either using import type ... for the affected type imports or emitDecoratorMetaData: false in tsconfig.json.
5. You (presumably) can't use the latter because your codebase relies on it (even though it seems to have no negative effect in the reproduction repo).

I believe vue-property-decorator uses type annotations for prop type-checking. Meaning emitDecoratorMetaData probably has no effect in production, but would affect development

[vegerot]

@LinusBorg @ktsn any thoughts on how we should proceed?

I find the "export 'ActionMethod' was not found in" warnings very annoying (getting literally hundreds of them), and the typescript-eslint errors are preventing us from releasing.

Should I bring this issue somewhere else? How can I help unblock my team?