Error TS2694: Namespace has no exported member 'ColorAdjustProperty'

[hopkins385]

Hi, unfortunately, beta12 is still throwing errors on my Vite system.
I'm using Vite + Vue 3 + Typescript

Command that's causing the issue

npm run build

System Information:

Node Version: v16.13.2 System: Win10 x64

main.ts

import { createApp } from 'vue';
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from "vue-router";
import { MotionPlugin } from '@vueuse/motion'

const app = createApp({

})
app.use(createPinia())
app.use(router)
app.use(MotionPlugin)
app.mount('#app');

package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --host",
    "check:updates": "ncu"
  },
 "dependencies": {
    "@headlessui/vue": "^1.5.0",
    "@vueuse/core": "^8.1.1",
    "@vueuse/motion": "^2.0.0-beta.12",
    "bootstrap-icons-vue": "^1.8.1",
    "pinia": "^2.0.12",
    "vue": "^3.2.31",
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
    "@babel/types": "^7.17.0",
    "@types/node": "^17.0.21",
    "@vitejs/plugin-vue": "^2.2.4",
    "@vueuse/components": "^8.1.1",
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "sass": "^1.49.9",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.2",
    "vite": "^2.8.6",
    "vite-imagetools": "^4.0.3",
    "vue-tsc": "^0.33.2"
  }

Errors:

node_modules/@vueuse/motion/dist/index.d.ts:762:31 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.

762         colorAdjust?: csstype.ColorAdjustProperty | undefined;
                                  ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:1262:42 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.

1262         WebkitPrintColorAdjust?: csstype.ColorAdjustProperty | undefined;
                                              ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:1536:34 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.

1536         "color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                      ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:1998:48 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
1998         "-webkit-print-color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                                    ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:2316:31 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
2316         colorAdjust?: csstype.ColorAdjustProperty | undefined;
                                   ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:2816:42 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
2816         WebkitPrintColorAdjust?: csstype.ColorAdjustProperty | undefined;
                                              ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:3090:34 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
3090         "color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                      ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:3552:48 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
3552         "-webkit-print-color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                                    ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:3889:31 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
3889         colorAdjust?: csstype.ColorAdjustProperty | undefined;
                                   ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:4389:42 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
4389         WebkitPrintColorAdjust?: csstype.ColorAdjustProperty | undefined;
                                              ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:4663:34 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
4663         "color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                      ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:5125:48 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
5125         "-webkit-print-color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                                    ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:5402:35 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
5402             colorAdjust?: csstype.ColorAdjustProperty | undefined;
                                       ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:5910:46 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
5910             WebkitPrintColorAdjust?: csstype.ColorAdjustProperty | undefined;
                                                  ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:6184:38 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
6184             "color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                          ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:6646:52 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
6646             "-webkit-print-color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                                        ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:7329:31 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
7329         colorAdjust?: csstype.ColorAdjustProperty | undefined;
                                   ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:7829:42 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
7829         WebkitPrintColorAdjust?: csstype.ColorAdjustProperty | undefined;
                                              ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:8103:34 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
8103         "color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                      ~~~~~~~~~~~~~~~~~~~

node_modules/@vueuse/motion/dist/index.d.ts:8565:48 - error TS2694: Namespace '"/node_modules/csstype/index"' has no exported member 'ColorAdjustProperty'.
8565         "-webkit-print-color-adjust"?: csstype.ColorAdjustProperty | undefined;
                                                    ~~~~~~~~~~~~~~~~~~~


Found 20 errors in the same file, starting at: node_modules/@vueuse/motion/dist/index.d.ts:762

[Tahul]

Hello 😄

I'm sorry about this issue!

Could you try 2.0.0-beta.17?

I'm currently heading towards release 2.0.0 and I'm still adjusting some parts of the package, so this might be expected.

If you still encounter it, I'm pretty sure it can be fixed by installing csstype locally.

As this is a pure type package, this should not have any bundle size implications.

[hopkins385]

Hi Tahul.

thanks for your feedback.! Your work is much appreciated!
And I have good news! It's working now with beta.17 🥇

This is my config.

Node: v16.13.2

{
  "name": "vite",
  "private": true,
  "version": "0.8.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --host",
  },
  "dependencies": {
    "@headlessui/vue": "^1.5.0",
    "@vueuse/core": "^8.1.2",
    "@vueuse/motion": "^2.0.0-beta.17",
    "bootstrap-icons-vue": "^1.8.1",
    "pinia": "^2.0.12",
    "vue": "^3.2.31",
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
    "@babel/types": "^7.17.0",
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "^2.2.4",
    "@vueuse/components": "^8.1.2",
    "autoprefixer": "^10.4.4",
    "postcss": "^8.4.12",
    "sass": "^1.49.9",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.2",
    "vite": "^2.8.6",
    "vite-imagetools": "^4.0.3",
    "vue-tsc": "^0.33.7"
  }
}

[Tahul]

So glad to know it!

I'm closing this now, feel free to reopen if you encounter it again!