Hi there! I am switching a KotlinJS project to Kot...

# javascript

[peekandpoke]

Hi there! I am switching a KotlinJS project to Kotlin 1.4.10. Everything is fine except that the Webpack-dev-server auto-reload does no longer work.
Loading the page initially works.
I am also running

gradle -t assemble

for continuous building.
But as soon as I change some code I get this error:

Failed to compile.

(webpack)-dev-server/client?<http://localhost:8888>
Module build failed (from /PROJECT/build/js/node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/PROJECT/build/js/node_modules/webpack-dev-server/client/index.js'

I checked what is going on and indeed there is no webpack-dev-server present in build/js/node_modules folder.
I should also mention that I have multiple JS modules in my project. So maybe they all write to the build/js/node_modules directory and interfere with each other, as they have different configurations. But even when only building a single module the problem stays the same.

I then tried to be sneaky and added this to one of the build.gradle files

testImplementation npm("webpack-dev-server", "3.11.0")

Which in fact solves the issue with reload in so far, that the error does no longer show up and that in build/js/node_modules there truely is the webpack-dev-server dependency.

But now the problem is: The page is reloading on code changes -> Good -> BUT: the changes are not picked up -> BAD

Does anyone have an idea what to look for or some workaround?
Thank you for reading 🙂

[peekandpoke]

Ok... I think i found the problem and a work-around.
The auto-reload works when I start my app with

./gradlew :myapp:browserProductionRun

By default the browserDevelopmentRun is used when you do

./gradlew :myapp:run

I then did some changes to my code the are easy go grep for. So before the a code change things look like this:

grep -r '!!!---!!!---!!!' *
build/js/packages/myapp/kotlin-dce/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login !!!---!!!---!!!');
build/js/packages/myapp/kotlin/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login !!!---!!!---!!!');
build/js/packages/myapp/kotlin-dce-dev/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login!!!---!!!---!!!');
myapp/src/main/kotlin/features/login/ui/LoginPage.kt:                        ui.header H3 { +"Login !!!---!!!---!!!" }

When I then change some code and grep again we see this:

grep -r '!!!---!!!---!!!' *
build/js/packages/myapp/kotlin-dce/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login !!!---!!!---!!!---CHANGED');
build/js/packages/myapp/kotlin/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login !!!---!!!---!!!---CHANGED');
build/js/packages/myapp/kotlin-dce-dev/thebase-web-adminapp.js:    $receiver.unaryPlus_pdl1vz$('Login!!!---!!!---!!!');
myapp/src/main/kotlin/features/login/ui/LoginPage.kt:                        ui.header H3 { +"Login !!!---!!!---!!!---CHANGED" }

As you can see: the change is NOT picked by the kotlin-dce-dev . And the :browserDevelopmentRun looks into this directory.
And the changes are picked up by kotlin-dce which is used by :browserProductionRun


Sooo... What can I do about this. I have the workarounds but surely a real fix would be nice. How do I proceed? File a bug? Someone picking this one up?
Thanks!

[Ilya Goncharov [JB]]

Hi, when you run :myapp:run , do you have only browser() in myapp?
Do you have your project open to debug it?

[peekandpoke]

Hi! Sorry the project is not open.
But I figured out something else. When I run the like this:

./gradlew -t :myapp:assemble :myapp:processDceDevKotlinJs

then the changes are picked up and the reload works.

[peekandpoke]

So it seems to me that somehow processDceDevKotlinJs is either not called or in the wrong order.

The problem with webpack-dev-server not present still persists. I think the solution could be to add webpack-dev-server into the generated package.json in the folder build/js/package.json which currently looks like this:

{
  "private": true,
  "workspaces": [
    "packages/myapp"
  ],
  "devDependencies": {},
  "dependencies": {},
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": [],
  "name": "thebase-web",
  "version": "0.1.0"
}

[peekandpoke]

In the devDependencies there the webpack-dev-server seems to be missing

[peekandpoke]

@Ilya Goncharov [JB] Thanks for picking this up! I really like the work that you guys are doing at JetBrains! It awesome!