We are currently trying to switch to ES modules bu...

# javascript

[Moritz Hofmeister]

We are currently trying to switch to ES modules but are facing an issue when doing production builds.
With jsBrowserDevelopmentRun everything works fine (probably because of some webpack dev server magic) but when running our ./gradlew clean stage task I face dependency resolution issues in my Index.mjs (Index.kt source file) with import { createRoot as createRoot } from 'react-dom/client';
The resulting error is Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".

When I check in the build folder what’s inside kotlin-react-dom there’s no client file present that would contain createRoot. Maybe this is an issue due to react-dom being exported with commonJS?

Basically, in the ModeratorInterface.kt the entry point is specified as /admin/js/CampusQR-moderatorFrontend.mjs for production and /moderatorFrontend.js in local development mode.
Btw I also saw that in the react-lazy-components example project (https://github.com/turansky/seskar/tree/master/tests/react-lazy-components/app) the build output does not contain createRoot. @turansky

You can check out the migration branch here: https://github.com/studoverse/campus-qr/tree/moritz/per-file-compilation

[turansky]

createRoot is here

[turansky]

Do you use MUI?

[Moritz Hofmeister]

Yes, also

[Moritz Hofmeister]

But as I described above createRoot works in dev mode. It’s just that in production it’s not part of the bundle anymore apparently.

[Moritz Hofmeister]

I assume your projects would have the same issues when not using development mode since you just use the .js file in index.html which only works for the dev mode with the webpack dev server

[turansky]

Probably this pill will help.

[turansky]

Helped?

[Moritz Hofmeister]

I am already using the MUI workaround, so this doesn’t fix it unfortunately.

[Moritz Hofmeister]

I also saw that the same issue occurs for example for the ThemeProvider with the following import in one of the wrapper files

import { default as default_0 } from '@mui/material/styles/ThemeProvider';

[Moritz Hofmeister]

You don’t have a project that runs without the webpack dev server and therefore runs solely on a static bundle, do you? Because I believe you’d get the same issue when you specify the .mjs entry file in the index.html yourself 🤔

[turansky]

Instead, I have such projects.
And they works fine.

[turansky]

Vite, Webpack - works fine

[turansky]

Probably you faced this issue?

[turansky]

cc @Michael Porotkin

[Moritz Hofmeister]

I’m not sure if it’s the same issue because our project just plainly fails at runtime due to e.g. createRoot not being found in kotlin-react-dom

[turansky]

For now it looks like local problem.

Possible root causes:
1. Probably some Webpack loader has such side effect.
2. Different Kotlin versions in project
3. Different wrappers versions in project

[Moritz Hofmeister]

Okay so here’s how to reproduce my root issue (= createRoot not existing) with the seskar project for you:
1. Open the seskar project.
2. Run gradle clean to be sure you are starting from scratch.
3. Run jsBrowserProductionWebpack for the react-lazy-components project.
4. Inside build/compileSync/js/main/productionExecutable/kotlin/kotlin-react-dom you will only see ReactHTML.mjs.
When running the equivalent dev task jsBrowserDevelopmentWebpack everything is here.

The issue seems to be that files that are actually used in the application are stripped from the resulting build.

[Moritz Hofmeister]

I also wanted to check out if something changed with Kotlin 2.1.0-RC and got the following error when running jsBrowserProductionWebpack or jsBrowserDevelopmentWebpack for the react-lazy-components project in seskar.

seskar-error-log-2-1-0-rc.txt

[turansky]

> 1. Inside build/compileSync/js/main/productionExecutable/kotlin/kotlin-react-dom you will only see ReactHTML.mjs.
It's expected 😉
createRoot - external declaration

[turansky]

I also wanted to check out if something changed with Kotlin 2.1.0-RC

You can use Seskar 3.50.1
We use it in our tests.

[Moritz Hofmeister]

There was some fuck up with copying the right build file. Fixed now finally 🙏🏼
Thanks for the input and support @turansky

[Moritz Hofmeister]

Also for anyone encountering the following issue:
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
I got this error in Kotlin 2.0.21. This went away after upgrading from Kotlin 2.0.21 to Kotlin 2.1.0-RC.