Hey all, I've got a Kotlin/JS react app running ni...

# javascript

[Don Kittle]

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:

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:

@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.

[turansky]

Do you use webpack distribution?

[Don Kittle]

I've only got very basic webpack config in my build.gradle...

commonWebpackConfig {
    cssSupport {
       enabled.set(true)
    }
}
webpackTask {
    output.libraryTarget = "commonjs2"
}

[turansky]

Do you build Node.js application?

[andylamax]

I think you are using the wrong task, you should use jsNodeProductionRun instead of jsBrowserProductionRun

[Don Kittle]

Alas, that gives me the same error, except at build time rather than runtime:

> 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.

[turansky]

Error description describe root cause

[turansky]

You have invalid package.json

[Don Kittle]

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.

[turansky]

Koltin/JS supports es module kind.
You can use it for new versions

[Don Kittle]

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.

[Don Kittle]

I do have one issue with the jsNodeProductionRun, though. When I try to run the code this way, I get back the following error:

> 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)

[Don Kittle]

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)

[Don Kittle]

@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.

[turansky]

I personally hide configuration in plugins

[turansky]

In wrappers we use this one