Создание Kotlin React Wrapper вокруг Paypal Downshift

Question

Я безуспешно пытался создать оболочку Kotlin JS для библиотеки PayPal Downshift. Я могу заставить Downshift работать отлично вне экосистемы Kotlin, но мне не повезло, когда я пытаюсь интегрировать его в приложение Kotlin JS.

Я лишил все свойства до следующего:-

@file:JsModule("downshift")

package components.downshift

import react.Component
import react.RProps
import react.RState
import react.ReactElement

@JsName("Downshift")
external class DownshiftComponent : Component<RProps, RState> {
    override fun render(): ReactElement?
}

Затем в метод рендеринга моего приложения React я добавляю следующее:

child<RProps, DownshiftComponent> {  }

Эквивалент в JSX работает внутри пользовательского компонента (хотя ничего не отображает!)

render() {
    return (
        <Downshift/>
    )
}

Ошибка, с которой я сталкиваюсь, заключается в следующем:

Ошибка типа: не удается прочитать свойство '$metadata$' из неопределенного

getOrCreateKClass
node_modules/kotlin/kotlin.js:27368
  27365 | if (jClass === String) {
  27366 |   return PrimitiveClasses_getInstance().stringClass;
  27367 | }
> 27368 | var metadata = jClass.$metadata$;
        | ^  27369 | if (metadata != null) {
  27370 |   if (metadata.$kClass$ == null) {
  27371 |     var kClass = new SimpleKClassImpl(jClass);

Для меня это говорит о том, что класс из пакета "downshift" не может быть найден (следовательно, не определен). Если это так, то как правильно импортировать Downshift, чтобы Kotlin мог его использовать?

Я установил модуль понижающей передачи с помощью npm

npm install downsift --save

и это отображается в моем файле package.json:-

{
  "name": "pop-up-shop-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.8.2",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/lab": "^3.0.0-alpha.28",
    "d3-shape": "^1.2.2",
    "downshift": "^3.2.0",
    "prop-types": "latest",
    "react": "^16.7.0",
    "react-autosuggest": "^9.4.3",
    "react-currency-format": "^1.0.0",
    "react-dom": "^16.7.0",
    "react-google-charts": "^3.0.10",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "devDependencies": {
    "react-scripts-kotlin": "3.0.3"
  },
  "scripts": {
    "start": "react-scripts-kotlin start",
    "build": "react-scripts-kotlin build",
    "eject": "react-scripts-kotlin eject",
    "gen-idea-libs": "react-scripts-kotlin gen-idea-libs",
    "get-types": "react-scripts-kotlin get-types --dest=src/types",
    "postinstall": "npm run gen-idea-libs"
  }
}

Вот стандартный импорт при использовании компонента act/jsx

import Downshift from "downshift";

Который соответствует @file:JsModule("downshift") а также @JsName("Downshift") аннотаций.

Любая помощь в получении этой работы будет принята с благодарностью

Answer 1

Я столкнулся с этой проблемой несколько дней назад. Ошибка очень сбивает с толку, но, покопавшись, я обнаружил, что проблема связана с типом (в вашем случаеDownshift) не определено. Вы можете легко поймать это, написав что-то вродеprinltn(DownshiftComponent::class) перед инициализацией реагировать.

Проблема наверное в сборке. Не забудьте добавить в него зависимость npm. Также иногда возникают сбои инкрементной сборки, и вам нужно сделать чистую сборку, чтобы увидеть изменения.