SDK : TS conflict with VueJS and Preact

[pierre-H]

Describe the Bug

Since the SDK includes the shared package which itself includes vuejs, there is a confilct in the definition of VNode with preact.

Type 'VNodeNormalizedRefAtom' is not assignable to tyoe 'Ref<any> | null | undefined'

In the file node_modules\@vue\runtime-core\dist\runtime-core.d.ts , the interface VNode is declared with ref: VNodeNormalizedRef | null;.
In the file node_modules\preact\src\internal.d.ts, the interface VNode is declared with ref?: Ref<any> | null;.

Why the JS SDK requires VueJS ?
According to me, it should not depend on a specific UI framework/library.

To Reproduce

Create a project with preact and the JS SDK.

Errors Shown

No response

What version of Directus are you using?

9.11.1

What version of Node.js are you using?

17.4.0

What database are you using?

MySQL

What browser are you using?

Firefox

How are you deploying Directus?

locally

[br41nslug]

Duplicate of directus/sdk#3

[piotr-cz]

As and workaound until directus/sdk#3 is resolved, try redeclaring VNode:

// tsconfig.json
{
  //...
  "include": [
    "src",
    "types"
  ],
}

// types/preact.d.ts
import 'preact'

declare global {
  namespace JSX {
    type VNode = preact.VNode

    // @directus/sdk < 10
    interface ElementClass extends preact.JSX.ElementClass { $props?: never }
  }
}

I'm not sure if this is how it should be done, but it works.