[vue3.x] Brand new vue project fails on type-check with vue-slider-component

[USMortality]

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]

Same problem here 😕

[Vincent-HD]

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]

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

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