Recently receiving type errors when building

[djandrade1]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

I recently just started getting the following type errors trying to build with the Vue version of splide:

app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/SplideTrack/SplideTrack.vue(10,46): error TS1444: 'Ref' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/Splide/Splide.vue(12,10): error TS1444: 'ComponentConstructor' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/Splide/Splide.vue(12,32): error TS1444: 'Options' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/SplideTrack/SplideTrack.vue(12,1): error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/Splide/Splide.vue(13,65): error TS1444: 'PropType' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/components/Splide/Splide.vue(13,84): error TS1444: 'Ref' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/constants/events.ts(29,3): error TS1444: 'EventMap' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/plugin/plugin.ts(1,1): error TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
app build: ../node_modules/.pnpm/@Splidejs[email protected]/node_modules/@splidejs/vue-splide/src/js/plugin/plugin.ts(1,10): error TS1444: 'App' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

Reproduction Link

No response

Steps to Reproduce

1. Make use of the the vue-splide components in a new vite vue typescript project
2. Build the project
   ...

Expected Behaviour

The app builds normally without issue. I am wondering if you bump the main splide version from 4.1.3 to 4.1.4 if that may fix it since there was a type bug report recently reported for that here: Splidejs/splide#1003

[djandrade1]

Actually, looking into it more this appears to be an issue with not explicitly marking a type when doing an import. So, for those issues listed above you would need to add type in front of each import. It looks like this is only required in a few places. Would it be possible to get this updated?

Examples:
Splide.vue
From this:
import { ComponentConstructor, Options, Splide } from '@splidejs/splide';
import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, provide, Ref, ref, watch } from 'vue';
To this:
import type { ComponentConstructor, Options, Splide } from '@splidejs/splide';
import { computed, defineComponent, onBeforeUnmount, onMounted, type PropType, provide, type Ref, ref, watch } from 'vue';

SplideTrack.vue
From this:
import { defineComponent, onUpdated, inject, Ref } from 'vue';
import { Splide } from '@splidejs/splide';
To this:
import { defineComponent, onUpdated, inject, type Ref } from 'vue';
import type { Splide } from '@splidejs/splide';

[djandrade1]

I forked this and resolved it here for reference. Feel free to update your master.
master...djandrade1:vue-splide:master

Vite now requires isolatedModules and preserveValueImports in their tsconfig.json. Please see the latest @vue/tsconfig/tsconfig.json. These commits enable this to work.
excerpt from their new tsconfig.json:
// Required in Vite
"isolatedModules": true,
// For <script setup>
// See https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#preserve-value-imports
"preserveValueImports": true,
// Enforce using import type instead of import for types

[rriixx]

i created a PR #82

[toto6038]

I encountered this issue as well after upgrading to Nuxt 3.8 which enforces verbatimModuleSyntax by default. Setting this option requires using type-only import.

Based on vue-tsc output, I can confirm the errors are caused by following lines:

vue-splide/src/js/components/Splide/Splide.vue

Lines 12 to 13 in a3657c7

	import { ComponentConstructor, Options, Splide } from '@splidejs/splide';
	import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, provide, Ref, ref, watch } from 'vue';

vue-splide/src/js/components/SplideTrack/SplideTrack.vue

Line 10 in a3657c7

import { defineComponent, onUpdated, inject, Ref } from 'vue';

vue-splide/src/js/constants/events.ts

Line 29 in a3657c7

EventMap,

vue-splide/src/js/plugin/plugin.ts

Line 1 in a3657c7

import { App } from 'vue';

Still waiting #82 to be processed...

[joris-gallot]

I think the package shouldn’t be exporting typescript files in the build, I made some typescript fixes and changed the build to include only the .js and .d.ts files
If interested: https://github.com/joris-gallot/vue-splide