Could not find a declaration file for module '@toast-ui/editor'.

[bang-star]

Summary

A clear and concise description of what the question is.

environment

• OS: mac M1
• node: 18.18.1
• dev: Vue3+Vite with TypeScript

bc vue-editor doesn't supoort vue-3, I installed npm install --save @toast-ui/editor(v3.2.2).

I try to run example source With reference to https://yy-z-a.tistory.com/14 and https://www.youtube.com/watch?v=1eEboj5LnEU&ab_channel=ArikHnChannel.

<template>
  <div class="app">
    <div ref="groundElRef"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import {refs} from "@/utils/refs.ts";

defineProps({
  modelValue: {
    type: String,
    required: true,
    default: ''
  }
});

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>();

const editor = ref();
const groundElRef = refs(HTMLDivElement);

onMounted(() => {
  editor.value = new Editor({
    el: groundElRef.value,
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    events: {
      change: () => emit('update:modelValue', editor.value.getMarkdown()),
    }
  })
})
</script>

<style scoped>
.app {
  height: 800px;
}
</style>

when typing npm run serve, occur below error.

Could not find a declaration file for module '@toast-ui/editor'. '~/node_modules/@toast-ui/editor/dist/esm/index.js' implicitly has an 'any' type. 
There are types at '~/node_modules/@toast-ui/editor/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@toast-ui/editor' library may need to update its package.json or typings.

9 import Editor from '@toast-ui/editor';

how can i solve it?

[cjboco]

For the @toast-ui/react-editor wrapper, I used.

npm install types/@toast-ui/react-editor

You may want to try that, i.e. npm install types/@toast-editor. If that doesn't work, you can always add an external type declaration file until the type definition is available. You do this by creating, at the root of your project, a file called external.d.ts with the content of:

declare module '@toast-ui/editor';

This should squash the error warning on your import.

[bang-star]

@cjboco I tried your solutions. but I cant solve it.

1. npm install types/@toast-ui/vue-editor -> cant find npm.
2. declare moudle @toast-ui/editor -> how can i do?

[cjboco]

@cjboco I tried your solutions. but I cant solve it.

1. npm install types/@toast-ui/vue-editor -> cant find npm.
2. declare moudle @toast-ui/editor -> how can i do?

1) Can't find NPM? How did you do npm install --save @toast-ui/editor? 2) "You do this by creating, at the root of your project, a file called external.d.ts with the content of: declare module '@toast-ui/editor';"... I explained how.

[bang-star]

1. Can't find NPM? How did you do npm install --save @toast-ui/editor?
2. "You do this by creating, at the root of your project, a file called external.d.ts with the content of: declare module '@toast-ui/editor';"... I explained how.

I success. thx. @cjboco.

[smarfy99]

@cjboco I tried your solutions. but I cant solve it.

1. npm install types/@toast-ui/vue-editor -> cant find npm.
2. declare moudle @toast-ui/editor -> how can i do?

1. Can't find NPM? How did you do npm install --save @toast-ui/editor?
2. "You do this by creating, at the root of your project, a file called external.d.ts with the content of: declare module '@toast-ui/editor';"... I explained how.

how did you success? I create file external.d.ts at the root, but still can't find declare file. It's version 3.2.2.

[gilney-canaltelecom]

I'm also having this problem...

• @types/toast-ui/editor, @types/toast-ui__editor and so on don't exist;
• "declare module '@toast-ui/editor';" stops the warning, but i still dont have the editor types, so it doesn't help much;

It seems like the lib' package.json would need to change to fix the problem...

---

So... after a bit more research and ideas, what finally fixed it for me was adding this to the tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@toast-ui/editor": [
        "./node_modules/@toast-ui/editor/types/index.d.ts"
      ],
      "@toast-ui/editor/types": [
        "./node_modules/@toast-ui/editor/types"
      ]
    }
  }
}

With this, i have the corrects types on the Editor and i can also import the types correctly 👍

[karolyi]

Can be fixed temporarily with putting the "types" into @toast-ui/editor/package.json:

  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/toastui-editor.js",
      "types": "./types/index.d.ts"
    },

Not much of an activity in this project lately though. The last comment/release was 10 months ago.

[nacodermer]

I'm also having this problem...

* @types/toast-ui/editor, @types/toast-ui__editor and so on don't exist;

* "declare module '@toast-ui/editor';" stops the warning, but i still dont have the editor types, so it doesn't help much;

It seems like the lib' package.json would need to change to fix the problem...

So... after a bit more research and ideas, what finally fixed it for me was adding this to the tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@toast-ui/editor": [
        "./node_modules/@toast-ui/editor/types/index.d.ts"
      ],
      "@toast-ui/editor/types": [
        "./node_modules/@toast-ui/editor/types"
      ]
    }
  }
}

With this, i have the corrects types on the Editor and i can also import the types correctly 👍

my tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@toast-ui/editor": ["./node_modules/@toast-ui/editor/types"]
    }
  }
}

this works for me,and, inspired by How to pass DOM elements for libraries (eg. ChartJS, Hightcharts) in Virtual DOMs (such as Qwik)?, using tui.editor in qwik also works Notice: need replace useClientEffect with useVisibleTask