mui.materials is missing exports needed for target.set("es2015")

[mkienenb]

Is your feature request related to a problem? Please describe.
Attempting to use the mui.materials wrapper in a target.set("es2015") environment results in

example project here: #2841

jsBrowserDevelopmentRun runtime errors:

Uncaught runtime errors:
ERROR
Cannot find module '@mui/material/Box'
webpackMissingModule@webpack-internal:///./kotlin/react-mui-materials/example/react/View.mjs:5:50
@webpack-internal:///./kotlin/react-mui-materials/example/react/View.mjs:5:142
./kotlin/react-mui-materials/example/react/View.mjs@http://localhost:8080/index.js:1649:1
__webpack_require__@http://localhost:8080/index.js:1682:32
fn@http://localhost:8080/index.js:1888:21
@webpack-internal:///./kotlin/react-mui-materials/example/react/Main.mjs:7:86
./kotlin/react-mui-materials/example/react/Main.mjs@http://localhost:8080/index.js:1638:1
__webpack_require__@http://localhost:8080/index.js:1682:32
fn@http://localhost:8080/index.js:1888:21
./kotlin/react-mui-materials.mjs@http://localhost:8080/index.js:1619:120
__webpack_require__@http://localhost:8080/index.js:1682:32
@http://localhost:8080/index.js:2782:56
@http://localhost:8080/index.js:2785:12
webpackUniversalModuleDefinition@http://localhost:8080/index.js:17:33
@http://localhost:8080/index.js:18:3

In my production project with target.set("es2015") enabled
, I also see jsNodeTest build errors:

 Exception during run: Error: Directory import '.../build/js/node_modules/@mui/material/Box' is not supported resolving ES modules imported from .../build/js/packages/app-test/kotlin/app.mjs
Did you mean to import "@mui/material/node/Box/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:262:11)
    at moduleResolve (node:internal/modules/esm/resolve:864:10)
    at defaultResolve (node:internal/modules/esm/resolve:990:11)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:755:20)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:732:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:317:38)
    at ModuleJob.#link (node:internal/modules/esm/module_job:208:49) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///.../build/js/node_modules/@mui/material/Box'
}

Describe the solution you'd like
App will compile and run without errors with target.set("es2015") enabled

Additional context
According to the LLM:

MUI v5.14+ ships a proper exports field in package.json that supports ESM subpath imports. 

`build/js/node_modules/@mui/material/package.json` has no exports field at all.
Without exports, Node.js's ESM resolver has no subpath map to follow, so when Kotlin's generated .mjs tries to import @mui/material/Box, the ESM loader sees a directory with no guidance and throws ERR_UNSUPPORTED_DIR_IMPORT.

[turansky]

It's known Webpack + MUI problem.
Please use related patch.

[mkienenb]

Since it also happened in vite, wouldn't that be a problem even without Webpack?

Also, where do I find the related patch?

[turansky]

Patch

[turansky]

Since it also happened in vite, wouldn't that be a problem even without Webpack?

Yes, looks like it's old MUI problem (for all bundlers)

[mkienenb]

Unfortunately, the workaround doesn't work for either my production project nor the example mui app.
I guess it's possible that examples/react-mui-materials/webpack.config.d/workaround-for-mui-libraries-while-using-es2015-compiler-option.js is the wrong location for the example, but I know it's in the right location for my own project.

Also, mui.materials package.json seems to show export fields in the current versions.

https://www.npmjs.com/package/@mui/material?activeTab=code

Are they incomplete or is there some other reason why they don't get picked up?

[mkienenb]

I should say that the examples workaround does change behavior, but now I get a blank screen instead of an error. I guess I will have to try to determine what the new error is.

But it doesn't change the running of jsNodeTest for my prod app

[turansky]

Also, mui.materials package.json seems to show export fields in the current versions.

Current MUI declarations don't use latest NPM dependencies.
We need contributor, who will write new generator ;)

[mkienenb]

Added a readme. w/o patch, development run gives mui error. w/ patch gives emotion styled error.
w/ and w/o patch, gives blank screen for production run, which is what confused me.

[mkienenb]

chore: even though the example doesn't directly use emotion.styled, I still have to declare the dependency. That seems wrong.

With this, :mui-materials:jsBrowserDevelopmentRun works.

[turansky]

even though the example doesn't directly use emotion.styled, I still have to declare the dependency. That seems wrong.

It's default installation ;)
Otherwise it won't be possible to change css-in-js engine :(

[mkienenb]

Ah. I'm not on the UX team so I am not too familiar with this part of react/mui. That's also why the code sample I picked wasn't well written as a component :)

[turansky]

Cache invalidation works for me:

[turansky]

Please check cleanup fixes

[mkienenb]

Those fixes look good to me.