tinymce / tinymce-vue

Official TinyMCE Vue component
MIT License
2.06k stars 207 forks source link

Types break with moduleResolution NodeNext in tsconfig.json #366

Open unshame opened 1 year ago

unshame commented 1 year ago

With "moduleResolution": "NodeNext" in tsconfig.json, typescript incorrectly assumes the type of exports of @tinymce/tinymce-vue.

This works at runtime but doesn't compile:

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue';
</script>

<template>
    <Editor /> 
    <!-- Type '{}' is not assignable to type 'ComponentProps<typeof import("node_modules/@tinymce/tinymce-vue/lib/cjs/main/ts/index")>' -->
</template>

This compiles but breaks at runtime:

<script setup lang="ts">
import EditorImport from '@tinymce/tinymce-vue';

const Editor = EditorImport.default;
</script>

<template>
    <Editor />
</template>

This works, but requires a dynamic import:

<script setup lang="ts">
const Editor = defineAsyncComponent(async () => (await import('@tinymce/tinymce-vue')).default);
</script>

<template>
    <Editor />
</template>

The way I managed to fix it is to patch @tinymce/tinymce-vue's package.json with "type": "module", so typescript knows to treat it as an es module. But I'm not sure if that's a proper solution, since I'm still trying to wrap my head around this whole typescript node esm disaster.

exalate-issue-sync[bot] commented 1 year ago

Ref: INT-3162

lorenzo-pomili commented 1 year ago

I cannot replicate it, can you provide us a repo with an example and the step by step instructions to replicate it?

unshame commented 1 year ago

Here you go https://github.com/unshame/tinymce-node-next-bug

yarn
yarn run build

will give the following error:

 src/App.vue:6:6 - error TS2345: Argument of type '{}' is not assignable to parameter of type 'typeof import(".../node_modules/@tinymce/tinymce-vue/lib/cjs/main/ts/index")'.
  Property 'Editor' is missing in type '{}' but required in type 'typeof import(".../node_modules/@tinymce/tinymce-vue/lib/cjs/main/ts/index")'.

 6     <Editor />
       ~~~~~~

 node_modules/@tinymce/tinymce-vue/lib/cjs/main/ts/index.d.ts:9:1
    9 export default Editor;
      ~~~~~~~~~~~~~~~~~~~~~~
    'Editor' is declared here.

 Found 1 error in src/App.vue:6
lorenzo-pomili commented 1 year ago

Thanks for the example, we will investigate on that