Creating a Kotlin React Wrapper around Paypal Downshift

Question

I've been trying without success to create a Kotlin JS wrapper around the PayPal Downshift library. I can get Downshift to work fine outside the Kotlin ecosystem, but am having no luck when trying to integrate it into a Kotlin JS application.

I've stripped all the properties out to the following:-

@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?
}

Then inside my React app's render method I add the following:-

child<RProps, DownshiftComponent> {  }

The equivalent in JSX works inside a custom component (although renders nothing!)

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

The error I end up with is as follows:-

TypeError: Cannot read property '$metadata$' of undefined

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);

To me this is suggesting the class from the "downshift" package can't be found (hence undefined). If that is the case what is the correct way to import Downshift so Kotlin can use it?

I have installed the downshift module using npm

npm install downsift --save

and it is showing in my package.json file:-

{
  "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"
  }
}

Here is the standard import when using a react/jsx component

import Downshift from "downshift";

Which matches the @file:JsModule("downshift") and @JsName("Downshift") annotations.

Any help getting this working would be appreciated

Did you try using `@JsName("default")` instead of `@JsName("Downshift")`? — Franco, Mar 27 '20 at 05:40

score 1 · Answer 1 · answered Jun 25 '19 at 06:38

I've encountered this problem few days ago. The error is very confusing, but after some digging I found that the problem originates in the type (in your case Downshift) being undefined. You can easily catch it by writing something like prinltn(DownshiftComponent::class) before initializing react.

The problem is probably with the build. Don't forget to add the npm dependency in it. Also sometimes incremental build glitches and you need to do a clean build to see changes.

Creating a Kotlin React Wrapper around Paypal Downshift

1 Answers1