https://kotlinlang.org
Join Slack
Menu
Home
Archive
Update: :white_check_mark: RESOLVED :white_check_mark: Hi friends I am facing <this> issue but the...
# javascript
s
Update: ✅ RESOLVED ✅ Hi friends I am facing this issue but the solution provided in the thread does not seem to be working for me The first attached image shows what 
.js
files are being generated for my project (inside the 
/Clippy/js/build/compileSync/js/main/developmentExecutable/kotlin
package) The second attached image shows the content generated for 
Clippy-js.js
file Is there a way to just include a single 
.js
file in the 
<script>
tag inside my project's 
index.html
file that automatically imports its required dependencies? This is how my 
index.js
file looks like at the moment:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Client</title>
</head>
<body>
<div id="root"></div>
<script src="Clippy-js.js"></script>
</body>
</html>
And this is the error message I see in the console:
Copy code
Uncaught Error: Error loading module 'Clippy-js'. Its dependency 'react-dom/client' was not found. Please, check whether 'react-dom/client' is loaded prior to 'Clippy-js'.
    at Clippy-js.js:8:13
    at Clippy-js.js:21:2
a
What's the structure of your project? (Run 
./gradlew projects -q
)
s
It's a KMP project @Adam S :
Copy code
➜  Clippy ./gradlew projects -q

------------------------------------------------------------
Root project 'Clippy'
------------------------------------------------------------

Root project 'Clippy'
+--- Project ':android'
+--- Project ':js'
\--- Project ':shared'

To see a list of the tasks of a project, run gradlew <project-path>:tasks
For example, try running gradlew :android:tasks
a
@Ilya Goncharov [JB] I remember you have already answered on a related question.
a
Assuming the 
:js
subproject contains the index.html then can you try and import a file named 
js.js
, not 
Clippy-js.js
?
i
Thank you, please take a look, it is similar issue https://kotlinlang.slack.com/archives/C0B8L3U69/p1696090738854919
TL;DR: you can use webpack task which is inside 
browser
subtarget by default. It prepares bundle js file which you can just include into your 
html
page
s
> Assuming the 
:js
subproject contains the index.html then can you try and import a file named 
js.js
, not 
Clippy-js.js
? @Adam S It worked 👏 Thanks a lot! Could you please shed some light on how did you make this conclusion? It doesn't seem very obvious after going through Kotlin/JS' documentation.
a
I agree, it's not intuitive! It's like @Ilya Goncharov [JB] said in a comment in the issue you linked, the JS filename has to match the subproject name (you tried to use the full subproject path, I believe)
🙌 1
s
Also, I can't seem to be able to find the 
js.js
file in the codebase 🤔
But nevertheless, the project works for now, so we can clip this conversation here. Thanks a bunch everyone 👏 🙌
a
I proposed an improvement here https://youtrack.jetbrains.com/issue/KT-60569, if you'd like to use a bit of Gradle magic
🆒 1
i
Also, I can’t seem to be able to find the 
js.js
file in the codebase
It is generated by webpack. If you run via 
run
task it is generated only in memory. If you run 
assemble
, you can find result in 
js/build/distributions
✅ 1
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by