Hello @Big Chungus, I have been battling with

npm-publish

with no avail. The plugin works well on my machine to publish on ithub packages. But fails on github ci. Have you tested it on CI? Is there an example?

Hi, what means this error ? I just tried to run my application

Hi. I'm using Kotlin/JS. Is there a way to set webpack version without using gradle's

afterEvaluate

? I'm following a

mentioned solution here

. But I'm having an issue:

How can I detect if I'm running in development (

browserDevelopmentRun

) or production (

assemble

)?

In a multiproject project setup like this one. Is it possible for project A to depend on project B and build project A without including the js source of project B? Say example, a host webpack instance contains some component and a container webpack instance lazy loads (via js import and react lazy) a component from that host. Im trying to setup a microfrontend project that uses webpack 5's Module Federation and while keeping a type safe solution. Any direction with this would be greatly appreciated.

EDIT: moving go #gradle since the more I look at this, the less JS-specific it is

Hello everyone. I'm trying to implement wrapper over Ring UI Loader component. There is prop with name 'data-test' (

static propTypes = {/* ... */ 'data-test': PropTypes.string, /* ... */ };

) How can I implement this prop in Kotlin/JS (I've tried

@JsName("data-test")

, but it says "Name contains illegal chars that can't appear in JavaScript identifier")?

Is there an easy way to create react element without rendering it?

val p = p { +"Should not render!"}

(but it renders)

Having fixed version of npm dependencies in the Kotlin gradle plugin seems to be generating errors over and over again. Webpack 5.38.1 hardcoded in Kotlin 1.5.30 seems to have major problems with data uris. Upgrading manually to 5.51.1 fixes at least some of these problems. At least after KT-48273 I know how to upgrade.

I'm trying to integrate maplibre-gl in a kotlin-js project and I'm struggling a bit with adapting the broken type definitions generated by generateExternals. I have 3 variants of the same code that initializes the map. The only one that works is the one where everything happens in a

js(...)

call. I'm trying to figure out why. The other two fail with an "object is not iterable" somewhere deep in the maplibre libraries. It seems to expect a javascript object that is iterable and whatever kotlin-js does with this, seems to not meet the expectations when dealing these options. Also, the only way I can get the library to initialize is via index.html; if I load it via implementation(npm("..." )) instead I get a maplibre-gl not found error with the working variant and the same error for non-iterable objects with the other two. Here's my code. I would appreciate any suggestions for getting some working type definitions for this as messing with

js()

is a bit ugly. The init gets called after the dom tree with the container is created. Only variant 3 renders the map.

external interface MapboxOptions {
    var container: String
    var style: String
    var center: Array<Double>
    var zoom: Int
}

external open class Map(options: dynamic)

class MapManager() {
    var map: dynamic = null
    fun init() {
        // variant 1, fails with "Object is not Iterable" in map.js on the line that works with the options
//        val options = object : MapboxOptions {
//            override var container = "maplibre-container"
//            override var style = "<https://demotiles.maplibre.org/style.json>"
//            override var center = arrayOf(13.0, 52.0)
//            override var zoom = 4
//        }
//        println(options)
//        map = Map(options)

        // variant 2, same failure
//        val options = js("""
//            {
//                container: "maplibre-container",
//                style: "<https://demotiles.maplibre.org/style.json>",
//                center: [13.0,52.0],
//                zoom: 3,
//            }
//        """)
//        map=Map(options)

        // variant 3, works?!?!
        map = js(
            """
            var map = new maplibregl.Map({
                container: "maplibre-container",
                style: "<https://demotiles.maplibre.org/style.json>",
                center: [13.0,52.0],
                zoom: 3,
            });
            console.log("created map ");
            console.log(map);
            return map;
            """
        )

        console.log(map)
        return map
    }
}

maybe this is obvious, but since I didn't see it documented anywhere - is it expected that @JsExport doesn't work on

internal

objects/classes? I was able to access them from JS with the legacy compiler, but needed to remove

internal

to access them with IR

Hello, What method/function should I use if I want to completely dump the current window/tab and load some other URL in its place instead? For example the user is on: somedomain.tld/redirectafterpress and I want them to be redirected to this url: somedomain.tld/some/other/path after pressing a button on the webpage

Getting a lot of

Function "myfunction" is never used

warnings on `@JsExport`ed objects. My whole reason to export the object is that I want

myfunction

to be called from JS and not Kotlin Any way to disable that warning specifically on methods/properties of exported declarations?

Hi, why the canvas API doesn't work with Kotlin ? I have this code, but nothing is drawn

window.onload = {
	val canvas = document.body!!.append.canvas {} as HTMLCanvasElement
	val ctx = canvas.getContext("2d") as CanvasRenderingContext2D
	ctx.fillStyle = "green"
	ctx.fillRect(10.0, 10.0, 100.0, 100.0)
}

Just started a kotlin full-stack project from IDEA; What gradle task do I run to make it build the entire project as one jar, and where should I put the assets and such?

Execution failed for task ':jvmProcessResources'.
> Entry server_style.css is a duplicate but no duplicate handling strategy has been set. Please refer to <https://docs.gradle.org/7.1/dsl/org.gradle.api.tasks.Copy.html#org.gradle.api.tasks.Copy:duplicatesStrategy> for details.

I also get this while trying to run my project, it says server_style.css is duplicate but it's only in jvmMain/resources and not in jsMain/resources or commonMain/resources

Running into another situation today where my kotlin js build is failing due to a change in an indirect javascript dependency (I think… old green builds now don’t work 😞 ). Has anybody got any lock-file-style solutions for this sort of thing? or any ideas?

Hi, trying to create wrapper for react-checkbox-tree (npm link). Got error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Router.Consumer`.

More in thread.

Hey peeps! I’m currently using a Kotlin Multiplatform project to export some backend logic to a JS application. We’ve recently started using

Instant

from the kotlinx-datetime package inside that project and now the exported JS package requires "@js-joda/core" to be present in order to function (even though the class using the Instant is not annotated with

@JSExport

). Is anyone aware of a way to make the integration work without needing to add the @js-joda/core library to the JS project? 🤔 Update: Looks like there should be some way to configure the dependency "org.jetbrains.kotlinx:kotlinx-datetime:0.2.1" to not be used for the JS target. But even after reading the docs it’s not very clear to me how to achieve that.

8:08:52 PM: Executing task 'browserDevelopmentRun --continuous'...

> Task :wrapper

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See <https://docs.gradle.org/7.1/userguide/command_line_interface.html#sec:command_line_warnings>

BUILD SUCCESSFUL in 1s
1 actionable task: 1 executed

Exiting continuous build as no executed tasks declared file system inputs.
> Task :kotlinNodeJsSetup SKIPPED
> Task :kotlinNpmCachesSetup
> Task :packageJson UP-TO-DATE
> Task :rootPackageJson UP-TO-DATE
> Task :kotlinNpmInstall UP-TO-DATE
> Task :generateExternalsIntegrated SKIPPED
> Task :downloadSass UP-TO-DATE
> Task :installSass UP-TO-DATE
> Task :compileSass UP-TO-DATE
> Task :sassCopy UP-TO-DATE
> Task :compileKotlinJs UP-TO-DATE
> Task :processResources UP-TO-DATE
> Task :mainClasses UP-TO-DATE
> Task :compileDevelopmentExecutableKotlinJs UP-TO-DATE
> Task :developmentExecutableCompileSync UP-TO-DATE
> Task :browserDevelopmentRun

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See <https://docs.gradle.org/7.1/userguide/command_line_interface.html#sec:command_line_warnings>

BUILD SUCCESSFUL in 4s
13 actionable tasks: 2 executed, 11 up-to-date

Waiting for changes to input files of tasks... (ctrl-d to exit)

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See <https://docs.gradle.org/7.1/userguide/command_line_interface.html#sec:command_line_warnings>

FAILURE: Build failed with an exception.

* What went wrong:
java.nio.file.AccessDeniedException: /var/lib/docker
> /var/lib/docker

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at <https://help.gradle.org>

BUILD FAILED in 4s
8:08:59 PM: Task execution finished 'browserDevelopmentRun --continuous'.

How do I solve this error? I'm just trying to run my react app in development mode 😕

var data by useState<List<MessageTemplateDto>>()

useEffectOnce {
  MainScope().launch{
    data = someSuspendingFetch()
    console.log(data) // undefined?!
  }
}

makeTable(data) // renders table with data

WTF?! Why is

data

right after assigning it

someSuspendingFetch()

undefined

, and yet it renders table with them.

https://github.com/JetBrains/kotlin-wrappers/pull/565/files#diff-71d8431fc71894a3148c8b3b77a8d760b632ce0d374fd50f84bc39c2fbfcbc27L247 how can I access

ref

in

RBuilder

after this change?!

Hi, created wrappers for react-checkbox-tree and react-folder-tree and this is the first time when I encountered such strange behavior with wrappers. More in thread.

Hello every one, I am getting that webpack error again. Any one else experiencing this?

rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {
    rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackDevServer.version =
        "4.0.0-rc.0" // tried "4.0.0", "4.1.0"
}

Nothing works

Hi, how to recreate such code in Kotlin/React?

...
import TreeView from '@material-ui/lab/TreeView';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
...
<TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
    >
...

Wrappers for

TreeView

and

ExpandMoreIcon

exists, but how to recreate

defaultCollapseIcon={<ExpandMoreIcon />}

?

Hey guys, does anyone know how to check in Kotlin whether I'm running in NodeJS or in a browser? I tried to test the presence of

window

but it's always non-null in Kotlin, it just fails at runtime on NodeJS.

Holla, I wanna ask something regarding https://youtrack.jetbrains.com/issue/KT-47038. Its an issue about allowing The kotlin/JS compiler to target multiple platforms just like how kotlin/native does. Lately I have been supplying JS bundled libraries to users who are consuming it in react native, and I can tell that, react native is neither a browser environment nor a node environment, even more it tends to switch context when running on chrome debugger (browser) vs on mobile (JavaScriptCore). So having only (jsBrowser & jsNode) targets as suggested on the issue won't be targeting all potential targets. This made me look for other targets as well, I discovered something like jsdom which runs in node but tries to mimic the browser. There are also others like NativeScript e.t.c This made me ponder on the question, as to how many targets will suffice? Should we just have all of them? what could/would the compiler offer on such targets?? your thoughts on this?

Does someone know how to get rid of the Webpack error that comes up with a new KotlinJs React project? Kinda discouraging learning with this error always showing up.