Hi everyone, I am Kotlin/JS newbie. I am trying to...

# javascript

[Romaric Tanguy BANGA]

Hi everyone, I am Kotlin/JS newbie.
I am trying to import external library Material Box in this component, but it doesn't work. the error message is materialbox() is not a function
thanks

[Alexey Artemiev]

I had the similar error with nanoid .
I have followed this piece of docs: https://kotlinlang.org/docs/js-modules.html#apply-jsmodule-to-packages
My `nanoid.kt`:

@file:JsModule("nanoid")
@file:JsNonModule
package nanoid

external fun nanoid(): String

Then I import nanoid.nanoid and call nanoid() function from module.

[Romaric Tanguy BANGA]

Hi @Alexey Artemiev, Thank for your reply.

I install materialize in build.gradle

implementation(npm("materialize-css", "~1.0.0"))

I created materialbox.kt

@file:JsModule("materialize-css")
@file:JsNonModule
package materialbox

external fun materialbox(): String

in my component

import materialbox.materialbox
-----

materialbox() // message error: is not a function

jq("document").ready(fun(){
    jq(".materialboxed").materialbox() // message error: is not a function
})

But I have the same error message.
-----------

[Nicodemus Ojwee]

Hello @Romaric Tanguy BANGA
I think materialize css stopped using jquery. I remember the code below working for me. And what you are trying to do above in materialbox.kt is wrong.

external val M: dynamic

Where M is i think an object provided by materialize css which can be used in your code as follows to call whatever method from it.

val elems = document.querySelector(".sidenav")
val instances = M.Sidenav.init(elems) {}

OR calling that method you are trying to call like.

var elems = document.querySelectorAll(".materialboxed");
    var instances = M.Materialbox.init(elems, options);

NOTE the last code above is in Kotlin not Javascript.
And if you want to use jquery i think Kotlin has a wrapper for it too.

For more you can check out the documentation for materialize css using link below.

https://materializecss.com/media.html

[Romaric Tanguy BANGA]

@Nicodemus Ojwee hello thanks for your reply, I update my Materialize.kt

@file:JsModule("materialize-css")
@file:JsNonModule
external val M: dynamic

and I use in my PokemonList.kt

val elems = document.querySelectorAll(".materialboxed")
val instances = M.Materialbox.init(elems) {}

I have an other error message: Cannot read property 'Materialbox' of undefined

have I correctly import materialize-css package ? and my build.gradle.kts is correct ?

but when I use Mat.kt

@JsModule("materialize-css")
@JsNonModule
external val M: dynamic

I have no error but media effect is not apply