Kotlin/JS: Unable to load Kotlin-Styled, kotlin-css-js

Web Development
1

Hi,

I’m preparing a talk on how to use Kotlin/JS for React JS applications. For the demo purpose i’ve created a project, and here is the link to my project, https://github.com/cchunduri/kotlin-js-demo

But when i’m running my project i’m getting below errors

ERROR in ./kotlin/kotlin-js-demo.js
Module not found: Error: Can’t resolve ‘./…/resources/styles.css’ in ‘/localpath/kotlin-js-demo/build/js/packages/kotlin-js-demo/kotlin’
@ ./kotlin/kotlin-js-demo.js 125:4-40
@ multi ./kotlin/kotlin-js-demo.js

ERROR in ./kotlin/kotlin-js-demo.js
Module not found: Error: Can’t resolve ‘kotlin-css-js’ in ‘/localpath/kotlin-js-demo/build/js/packages/kotlin-js-demo/kotlin’
@ ./kotlin/kotlin-js-demo.js 449:136-160
@ multi ./kotlin/kotlin-js-demo.js

ERROR in ./kotlin/kotlin-js-demo.js
Module not found: Error: Can’t resolve ‘kotlin-styled’ in ‘/localpath/kotlin-js-demo/build/js/packages/kotlin-js-demo/kotlin’
@ ./kotlin/kotlin-js-demo.js 449:110-134
@ multi ./kotlin/kotlin-js-demo.js

It is looking like i’m missing some webpack configuration. It’ll appreciable if you can help me to have correct configuration.

Thank you very much in advance. :slight_smile:

2

@cchunduri I think you’re talking about this problem - https://youtrack.jetbrains.com/issue/KT-31807
There is a workaround - you should create js file in webpack.config.d directory (e.g. root-folder/webpack.config.d/03.resolve.js and resolve alias, e.g.:

config.resolve.alias = {
    'kotlin-css-js': '@jetbrains/kotlin-css-js',
    'kotlin-extensions': '@jetbrains/kotlin-extensions',
    'kotlin-react': '@jetbrains/kotlin-react',
    'kotlin-react-dom': '@jetbrains/kotlin-react-dom',
    'kotlin-styled': '@jetbrains/kotlin-styled',
    'kotlinx-html-js': 'kotlinx-html',
};

But for now the best way to download kotlin wrappers from bintray - https://bintray.com/kotlin/kotlin-js-wrappers, e.g:

implementation "org.jetbrains:kotlin-react:$kotlin_wrapper_version"
implementation "org.jetbrains:kotlin-react-dom:$kotlin_wrapper_version"
implementation "org.jetbrains:kotlin-react-router-dom:$kotlin_wrapper_version"
implementation "org.jetbrains:kotlin-extensions:$kotlin_wrapper_version"
3

Hi @ivan.kubyshkin,

I tried the suggested way, still no luck. I’ve checked into the repo with the latest configuration. Can you check it once?

I can see those packages are being downloaded by gradle, but webpack is unable to find them,

image
image908×693 131 KB

4

Can you attach a link to your project and screenshot of your filetree in IDEA?

5

Project Code link is https://github.com/cchunduri/kotlin-js-demo

Below is the screenshot of file tree in IDEA

image
image905×697 54.5 KB

6

Sorry, I forgot to mention that you haven’t use WA if you download dependencies from maven. In your case, you should delete the 03.resolve.js.

Unfortunatelly there is a problem with css - https://youtrack.jetbrains.com/issue/KT-32721
Workaround is to add config.resolve.modules.push("processedResources/Js/main"); to your css.js

1 Like
7

@ivan.kubyshkin, Thank you very much for your timely help. Now application is up and running, all the css is loading. :grinning: :+1: