https://kotlinlang.org logo
Channels
Powered by
#javascript
Title
# javascript
s

Shubham Singh

10/24/2023, 7:59 AM
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

Adam S

10/24/2023, 8:45 AM
What's the structure of your project? (Run 
./gradlew projects -q
)
s

Shubham Singh

10/24/2023, 9:05 AM
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

Artem Kobzar

10/24/2023, 9:38 AM
@Ilya Goncharov [JB] I remember you have already answered on a related question.
a

Adam S

10/24/2023, 9:51 AM
Assuming the 
:js
subproject contains the index.html then can you try and import a file named 
js.js
, not 
Clippy-js.js
?
i

Ilya Goncharov [JB]

10/24/2023, 9:51 AM
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

Shubham Singh

10/24/2023, 9:53 AM
> 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

Adam S

10/24/2023, 9:56 AM
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

Shubham Singh

10/24/2023, 9:56 AM
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

Adam S

10/24/2023, 9:59 AM
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

Ilya Goncharov [JB]

10/24/2023, 9:59 AM
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
2 Views
Powered by