https://kotlinlang.org logo
#javascript
Title
# javascript
d

Don Kittle

12/03/2023, 7:29 PM
Hey all, I've got a Kotlin/JS react app running nicely locally, but I'm trying to get it running in a container so I can get it deployed. I'm using
CMD "node", "dmseer.js"
to run my app, I get the following error related to a markdown library for React:
Copy code
dmseer-web-1      | Error [ERR_REQUIRE_ESM]: require() of ES Module /code/node_modules/react-markdown/index.js from /code/dmseer.js not supported.
dmseer-web-1      | Instead change the require of index.js in /code/dmseer.js to a dynamic import() which is available in all CommonJS modules.
dmseer-web-1      |     at /code/dmseer.js:5:177
dmseer-web-1      |     at Object.<anonymous> (/code/dmseer.js:81:2) {
dmseer-web-1      |   code: 'ERR_REQUIRE_ESM'
dmseer-web-1      | }
The code defining my component looks like this:
Copy code
@file:JsModule("react-markdown")
@file:JsNonModule

package components

import react.FC
import react.Props


@JsName("default")
external val ReactMarkdown: FC<MarkdownProps>

external interface MarkdownProps : Props {
    var children: String
}
I build the JS code with
jsBrowserProductionRun
(which I think might be my issue), move the package.json to the build folder, run
node i
and then make that folder available to the container. Anyone have any ideas what might be going on? This all works fine when run locally.
t

turansky

12/03/2023, 10:02 PM
Do you use webpack distribution?
d

Don Kittle

12/04/2023, 7:34 AM
I've only got very basic webpack config in my build.gradle...
Copy code
commonWebpackConfig {
    cssSupport {
       enabled.set(true)
    }
}
webpackTask {
    output.libraryTarget = "commonjs2"
}
t

turansky

12/04/2023, 7:38 AM
Do you build Node.js application?
a

andylamax

12/04/2023, 7:46 AM
I think you are using the wrong task, you should use
jsNodeProductionRun
instead of
jsBrowserProductionRun
d

Don Kittle

12/04/2023, 8:09 AM
Alas, that gives me the same error, except at build time rather than runtime:
Copy code
> Task :jsNodeProductionRun FAILED
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/don/code/don/dmseer/build/js/node_modules/react-markdown/index.js
require() of ES modules is not supported.
require() of /Users/don/code/don/dmseer/build/js/node_modules/react-markdown/index.js from /Users/don/code/don/dmseer/build/js/packages/dmseer/kotlin/dmseer.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/don/code/don/dmseer/build/js/node_modules/react-markdown/package.json.
t

turansky

12/04/2023, 8:20 AM
Error description describe root cause
You have invalid
package.json
d

Don Kittle

12/04/2023, 2:03 PM
Hmm, I read somewhere else that this is because of
react-markdown
moving to ES modules and not supporting commonjs any more. I downgraded to an older version and resolved that build issue.
t

turansky

12/04/2023, 8:24 PM
Koltin/JS supports
es
module kind. You can use it for new versions
d

Don Kittle

12/04/2023, 8:24 PM
Ok, I'm in the process of upgrading Kotlin, multiplatform, and wrappers. I've been on the same version since I started this project a year ago.
🔥 2
I do have one issue with the
jsNodeProductionRun
, though. When I try to run the code this way, I get back the following error:
Copy code
> Task :jsNodeProductionRun FAILED
ReferenceError: document is not defined
    at main (/Users/don/code/don/dmseer/build/compileSync/js/main/developmentExecutable/kotlin/commonMainSources/libraries/stdlib/src/kotlin/util/Standard.kt:63:53)
I'm guessing this is because I need to do some work on my webpack config and package.json. I notice that my browser builds have a package.json that has no dependancies in it (no react, react-dom, router, etc)
@turansky is there a template for a up to date Kotlin/JS project? I feel like I've pulled together stuff from a bunch of old example projects and it's just not working well any more.
t

turansky

12/06/2023, 7:32 AM
I personally hide configuration in plugins
In wrappers we use this one
3 Views