kotlin-wrappers: IR compiler for @JsName("default") failure

Adopted react-media module (https://github.com/ReactTraining/react-media)

@file:JsModule("react-media")
@file:JsNonModule

package npm

import react.*

@JsName("default")
external class Media : Component<MediaProps, RState> {
    override fun render(): ReactElement?
}

external interface MediaProps : RProps {
    var query: String?
    var children: (matches: Boolean) -> ReactElement?
}

with legacy compiler works fine but for IR getting

> Task :reactJs:browserDevelopmentRun
Module parse failed: Unexpected keyword 'default' (36:6)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|   var Link = $module$react_router_dom.Link;
|   var NavLink = $module$react_router_dom.NavLink;
>   var default = $module$react_media.default;
|   'use strict';
|   Exception.prototype = Object.create(Error.prototype);

in build/js/packages/Lonje-reactJs/kotlin/Lonje-reactJs.js:

...
}(this, function (_, StyledComponents, $module$react, $module$react_dom, $module$styled_components, $module$react_router_dom, $module$react_media) {
  var Component = $module$react.Component;
  var createElement = $module$react.createElement;
  var Children = $module$react.Children;
  var Fragment = $module$react.Fragment;
  var render = $module$react_dom.render;
  var createGlobalStyle = $module$styled_components.createGlobalStyle;
  var useRouteMatch = $module$react_router_dom.useRouteMatch;
  var useParams = $module$react_router_dom.useParams;
  var BrowserRouter = $module$react_router_dom.BrowserRouter;
  var Switch = $module$react_router_dom.Switch;
  var Route = $module$react_router_dom.Route;
  var Redirect = $module$react_router_dom.Redirect;
  var Link = $module$react_router_dom.Link;
  var NavLink = $module$react_router_dom.NavLink;
  var default = $module$react_media.default;
  'use strict';
...

is there any way to rename default for javascript mapping?

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 46 (2 by maintainers)

Most upvoted comments

it works with:

fun RBuilder.media(handler: MediaProps.() -> Unit) =
    child(Media, jsObject()) {
        attrs(handler.unsafeCast<RProps.() -> Unit>())
    }

Hi @theromis! This is indeed an issue with the IR compiler; https://youtrack.jetbrains.com/issue/KT-41650.

You can try a pattern like we have in this file. https://github.com/anton-bannykh/web-app-react-kotlin-js-gradle/blob/IR-fixes/src/main/kotlin/ReactPlayer.kt:

@JsModule("react-player")
@JsNonModule
external object ReactPlayer {
    val default: RClass<ReactPlayerProps>
}

external interface ReactPlayerProps : RProps {
    var url: String
}