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.

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

Types break with moduleResolution NodeNext in tsconfig.json #366

Open
unshame opened this issue Mar 2, 2023 · 4 comments
Open

Types break with moduleResolution NodeNext in tsconfig.json #366

unshame opened this issue Mar 2, 2023 · 4 comments

Comments

@unshame
Copy link

unshame commented Mar 2, 2023

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

Ref: INT-3162

@lorenzo-pomili
Copy link
Collaborator

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

@lorenzo-pomili lorenzo-pomili added the needs: more info Further information is requested label Mar 16, 2023
@unshame
Copy link
Author

unshame commented Mar 30, 2023

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

Thanks for the example, we will investigate on that

@lorenzo-pomili lorenzo-pomili added status: escalated and removed needs: more info Further information is requested labels Apr 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants