Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
USMortality opened this issue Mar 24, 2023 · 5 comments · May be fixed by #696
Open

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

USMortality opened this issue Mar 24, 2023 · 5 comments · May be fixed by #696
Labels
bug

Comments

@USMortality
Copy link

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

> [email protected] 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
@USMortality USMortality changed the title [vue3.x] <Please enter the title here> [vue3.x] Brand New Vue Project fails on type-check with vue-slider-component Mar 24, 2023
@USMortality USMortality changed the title [vue3.x] Brand New Vue Project fails on type-check with vue-slider-component [vue3.x] Brand new vue project fails on type-check with vue-slider-component Mar 24, 2023
@Vincent-HD
Copy link

Same problem here 😕

@Vincent-HD
Copy link

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
Copy link

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

@dpmanyuemeiquqi
Copy link

Did this issue has any progress？

@a0s
Copy link

a0s commented Jul 31, 2024

Found this issue too..

@manyuemeiquqi manyuemeiquqi linked a pull request Aug 1, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
5 participants
@a0s @ThePlastic @Vincent-HD @USMortality @dpmanyuemeiquqi