MUI Icons. Migrate to named export [generated]

[aerialist7]

Default exports for icons doesn't work after migration to ESM: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. while using any material icon.

There are some ways to fix it.

First one is to change @file:JsModule("@mui/icons-material/Abc") to @file:JsModule("@mui/icons-material/esm/Abc"). Then @JsName("default") will be saved as you wish. But this approach produces separate logic for CommonJS and ESM.

Second one is to use named export. Here you can find MUI recommendations for bundle optimization – https://mui.com/material-ui/guides/minimizing-bundle-size/ – there are no affects of bundle size while using latest Webpack (KotlinJS case).

I also checked the resulting bundles – with named exports it's even smaller (see the files) default-exports.txt named-exports.txt

import mui.icons.material.Abc
import react.FC
import react.create
import react.dom.client.createRoot
import web.dom.document
import web.html.HTML.div

private val App = FC {
    Abc()
}

private fun main() {
    val container = document.createElement(div)
    document.body.appendChild(container)

    createRoot(container)
        .render(App.create())
}

[turansky]

In new scheme all components can be located in one file. Probably it will speedup compilation of subproject.

[aerialist7]

True. Single file is the next step of mine