I have a small wrapping Problem. I try to wrap <ht...

# javascript

[Hildebrandt Tobias]

I have a small wrapping Problem. I try to wrap https://github.com/AxaFrance/oidc-client/tree/main/packages/react-oidc.
It looked rather straight forward, as far as I can see it's just:

package shared.utils.reactOdic

@JsModule("@axa-fr/react-oidc")
@JsNonModule
external val OidcProvider: react.FC<OidcProviderProps>

external interface OidcProviderProps : PropsWithChildren {
    var configuration: OidcConfiguration
    // all the other fields
}

external interface OidcConfiguration {
    var client_id: String
    // all the other fields.
}

Then I tried to use it:

val App = FC<Props> {
    OidcProvider {
        configuration = oidcConfig
        RouterProvider { router = mainRouter }
        ReactQueryDevtools { initialIsOpen = false }
    }
}

But I get Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
When I do OidcProvier.create { /* *config & browser* */ } there is no error, but also no dom changes/empty site.

[turansky]

You need @JsModule on file level

[Hildebrandt Tobias]

Hey, thank you for your answer. I actually tried that before, but got the error that both @JsModule and @JsNonModule are required. @JsNonModule was will in without the file level declaration, so for some weird reason it didn't occur to me to put the @JsNonModule also on the file level. Thanks everything works now. ❤️

[turansky]

Please use target = "es2015"

[turansky]

And remove redundant @JsNonModule

[Hildebrandt Tobias]

I added it to

js("jsFrontend", IR) {
    compilerOptions {
        target = "es2015"
        freeCompilerArgs.add("-Xcontext-receivers")
    }
}

But now I get hundreds of these errors:

Module not found: Error: Can't resolve '@mui/material/CardActions' in 'path'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/CardActions' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[turansky]

cc @Michael Porotkin

[Hildebrandt Tobias]

I tried invalidating Caches, sadly it didn't help.
The error seems to come from :jsFrontend:jsFrontendBrowserProductionWebpack

[Michael Porotkin]

Hi, @Hildebrandt Tobias

Try adding this to your Webpack config

config.module.rules.push({
  test: /\.m?js$/i,
  resolve: {
    fullySpecified: false,
  },
})

[Hildebrandt Tobias]

Oh yeah, that worked. Much obliged. 🙏