[SOLVED] Kotlin/JS - external val from npm package is undefined

Kotlin/JS - external val from npm package is undefined

I'm trying to use React components from the CKEditor package in my kotlin/js code.

In javascript, I would import these like this:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

I've added both dependencies to my build.gradle.kts file:

implementation(npm("@ckeditor/ckeditor5-react","5.1.0"))
implementation(npm("@ckeditor/ckeditor5-build-classic", "36.0.1"))

For CKEditor, which imports fine, I made this file:

@file:JsModule("@ckeditor/ckeditor5-react")
@file:JsNonModule

import react.*

external interface CKEditorProps : Props {
    //...
}

@JsName("CKEditor")
external val CKEditor: ComponentClass<CKEditorProps>

Next I have my file for ClassicEditor, though I've tried many other ways:

@file:JsModule("@ckeditor/ckeditor5-build-classic")
@file:JsNonModule

@JsName("default")
external val ClassicEditor: Any

If I print both to console, I see CKEditor is a class, seemingly imported correctly. ClassicEditor, however, is undefined.

documentation for ClassicEditor is here: https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html

I have checked gradle dependencies to be sure the dependency exists.

+--- @ckeditor/ckeditor5-react:5.1.0 (n)
\--- @ckeditor/ckeditor5-build-classic:36.0.1 (n)

I've tried using external class or different types, including dynamic,ComponentClass, FC, etc.

I believe the @JsName should be default, but I've also tried using ClassicEditor.

I'm very new to kotlin-js, so I'm likely missing some context, but I've had no luck searching for answers online.

Solution

I don't know why, but removing file: from the annotations has fixed it.

@JsModule("@ckeditor/ckeditor5-build-classic")
@JsNonModule

instead of

@file:JsModule("@ckeditor/ckeditor5-build-classic")
@file:JsNonModule