[vue3.x] Brand new vue project fails on type-check with vue-slider-component
USMortality opened this issue · 3 comments
USMortality commented
Describe the bug
During Typescript build, the type check fails.
Here's a minimal reprex, based on latest vue generator: https://github.com/USMortality/-vue-slider-component-test
You can clone it and then run: npm type-check to verify the error:
~/d/vue-project (master|✔) $ npm run type-check 21:13:11
> vue-project@0.0.0 type-check
> vue-tsc --noEmit
node_modules/vue-slider-component/lib/vue-slider-dot.vue:23:27 - error TS1444: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
23 import { defineComponent, PropType } from 'vue'
~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:10 - error TS1444: 'Value' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:17 - error TS1444: 'Styles' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:25 - error TS1444: 'Position' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:35 - error TS1444: 'TooltipProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-dot.vue:24:48 - error TS1444: 'TooltipFormatter' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
24 import { Value, Styles, Position, TooltipProp, TooltipFormatter } from './typings'
~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-mark.vue:35:27 - error TS1444: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
35 import { defineComponent, PropType } from 'vue'
~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-mark.vue:36:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
36 import { Mark, Styles } from './typings'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider-mark.vue:36:10 - error TS1444: 'Mark' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
36 import { Mark, Styles } from './typings'
~~~~
node_modules/vue-slider-component/lib/vue-slider-mark.vue:36:16 - error TS1444: 'Styles' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
36 import { Mark, Styles } from './typings'
~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:105:27 - error TS1444: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
105 import { defineComponent, PropType } from 'vue'
~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:108:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
108 import {
~~~~~~~~
109 Value,
~~~~~~~~
...
120 TooltipFormatter,
~~~~~~~~~~~~~~~~~~~
121 } from './typings'
~~~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:109:3 - error TS1444: 'Value' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
109 Value,
~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:110:3 - error TS1444: 'DataObject' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
110 DataObject,
~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:111:3 - error TS1444: 'MarksProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
111 MarksProp,
~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:112:3 - error TS1444: 'Styles' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
112 Styles,
~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:113:3 - error TS1444: 'DotOption' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
113 DotOption,
~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:114:3 - error TS1444: 'Dot' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
114 Dot,
~~~
node_modules/vue-slider-component/lib/vue-slider.vue:115:3 - error TS1444: 'Direction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
115 Direction,
~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:116:3 - error TS1444: 'Position' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
116 Position,
~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:117:3 - error TS1444: 'ProcessProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
117 ProcessProp,
~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:118:3 - error TS1444: 'Process' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
118 Process,
~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:119:3 - error TS1444: 'TooltipProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
119 TooltipProp,
~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:120:3 - error TS1444: 'TooltipFormatter' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
120 TooltipFormatter,
~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:122:50 - error TS1444: 'HandleFunction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
122 import { getSize, getPos, getKeyboardHandleFunc, HandleFunction } from './utils'
~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/vue-slider.vue:125:17 - error TS1444: 'StateMap' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
125 import State, { StateMap } from './utils/state'
~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:2:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
2 import {
~~~~~~~~
3 Value,
~~~~~~~~
...
11 DotOption,
~~~~~~~~~~~~
12 } from '../typings'
~~~~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:3:3 - error TS1444: 'Value' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
3 Value,
~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:4:3 - error TS1444: 'Mark' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
4 Mark,
~~~~
node_modules/vue-slider-component/lib/utils/control.ts:5:3 - error TS1444: 'MarkOption' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
5 MarkOption,
~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:6:3 - error TS1444: 'Marks' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
6 Marks,
~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:7:3 - error TS1444: 'MarksProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
7 MarksProp,
~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:8:3 - error TS1444: 'ProcessProp' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
8 ProcessProp,
~~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:9:3 - error TS1444: 'ProcessOption' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
9 ProcessOption,
~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:10:3 - error TS1444: 'MarksFunction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
10 MarksFunction,
~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/control.ts:11:3 - error TS1444: 'DotOption' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
11 DotOption,
~~~~~~~~~
node_modules/vue-slider-component/lib/utils/index.ts:1:1 - error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
1 import { Direction } from '../typings'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/vue-slider-component/lib/utils/index.ts:1:10 - error TS1444: 'Direction' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
1 import { Direction } from '../typings'
~~~~~~~~~
Found 39 errors in 5 files.
Errors Files
7 node_modules/vue-slider-component/lib/vue-slider-dot.vue:23
4 node_modules/vue-slider-component/lib/vue-slider-mark.vue:35
16 node_modules/vue-slider-component/lib/vue-slider.vue:105
10 node_modules/vue-slider-component/lib/utils/control.ts:2
2 node_modules/vue-slider-component/lib/utils/index.ts:1
Environment (If you feel unrelated, please delete the block)
- OS & Version: macOS
- Vue version: 3.2.47
- Component Version: 4.1.0-beta.7
Vincent-HD commented
Same problem here 😕
Vincent-HD commented
To "solve" this for now, you can put "verbatimModuleSyntax": false inside compilerOptions in tsconfig.app.json, I'll probably make a PR to add "type" word before each imported type
ThePlastic commented
To "solve" this for now, you can put
"verbatimModuleSyntax": falseinsidecompilerOptionsintsconfig.app.json, I'll probably make a PR to add "type" word before each imported type
It worked for me, I put the "verbatimModuleSyntax": false in the tsconfig.vitest.json file as this is the one that vue-tsc uses to type-check