# Webpack Issues on a Gradle Kotlin/JS project

**URL:** <https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470>\
**Category:** JavaScript\
**Created:** [February 24, 2020, 12:56pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470 "2020-02-24T12:56:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakerxd](https://avatars.discourse-cdn.com/v4/letter/b/cab0a1/32.png) [@bakerxd](https://discuss.kotlinlang.org/u/bakerxd)\
**Post date:** [February 24, 2020, 12:56pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/1 "2020-02-24T12:56:56Z")

</div>

I’m trying to create a new project with Kotlin/JS and I’m running into some issues with the Webpack Server not appropriately hot reloading the changes. If I do a minimal change like this:

```
fun main() {
    println("Hello World!")
}

```

to:

```
fun main() {
    println("Hello World!")
    println("Hello Universe!")
}

```

The Webpack detects the change in the Main.kt file, but when I go check the webpage it does not show the changes at all. The messages being shown often are these:

```
[WDS] App updated. Recompiling...
[WDS] Nothing changed.

```

And when the webpage finally reflects the changes on the code, it does not show the latest change that I made, instead it shows a change that I could have made some time ago.

And last, but not least, it sometimes throws an error as well (after starting the server again and making a change to the code):

```
Module build failed (from C:/Users/xxxxxxx/Desktop/kotlin-js-demo/build/js/packages_imported/kotlin-source-map-loader/1.3.61/kotlin-source-map-loader.js):
Error: ENOENT: no such file or directory, open 'C:\Users\xxxxxxx\Desktop\kotlin-js-demo\build\js\packages\kotlin-js-demo\kotlin\kotlin-js-demo.js'

```

And I have to restart the server in order for the error to go away.

I would love to develop an app using Kotlin/JS but I simply can’t do it if the configuration is so mind boggingly unstable that I can’t even do the simplest of tasks without getting a massive headache.

Any help would be appreciated. Thanks.

PSA - All the configurations are the exact same as those shipped with the Kotlin/JS Gradle plugin. But for reference, here is my Webpack Config file:

```
var config = {
  mode: 'development',
  resolve: {
    modules: [
      "node_modules"
    ]
  },
  plugins: [],
  module: {
    rules: []
  }
};

// entry
if (!config.entry) config.entry = [];
config.entry.push("C:\\Users\\xxxxxxx\\Desktop\\kotlin-js-demo\\build\\js\\packages\\kotlin-js-demo\\kotlin\\kotlin-js-demo.js");
config.output = {
    path: "C:\\Users\\xxxxxxx\\Desktop\\kotlin-js-demo\\build\\distributions",
    filename: "kotlin-js-demo.js"
};

// source maps
config.module.rules.push({
        test: /\.js$/,
        use: ["kotlin-source-map-loader"],
        enforce: "pre"
});
config.devtool = 'eval-source-map';

// dev server
config.devServer = {
  "inline": true,
  "lazy": false,
  "noInfo": true,
  "open": true,
  "overlay": false,
  "port": 8080,
  "contentBase": [
    "C:\\Users\\xxxxxxx\\Desktop\\kotlin-js-demo\\build\\processedResources\\Js\\main"
  ]
};

// save evaluated config file
var util = require('util');
var fs = require("fs");
var evaluatedConfig = util.inspect(config, {showHidden: false, depth: null, compact: false});
fs.writeFile("C:\\Users\\xxxxxxx\\Desktop\\kotlin-js-demo\\build\\reports\\webpack\\kotlin-js-demo\\webpack.config.evaluated.js", evaluatedConfig, function (err) {});

module.exports = config

```

And here is my build.gradle file:

```
plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.61'
}

group 'com.example'
version '1.0-SNAPSHOT'

repositories {
    jcenter()
    mavenCentral()
}

kotlin {
    target {
        browser()
        useCommonJs()
    }

    sourceSets["main"].dependencies {
        implementation npm("navigo", "7.1.2")
    }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    implementation "org.jetbrains.kotlinx:kotlinx-html-js:0.6.12"
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.3.3'
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin.target.browser { }

```

---

<div class="post-metadata">

**Author:** ![ivan.kubyshkin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/ivan.kubyshkin/32/7066_2.png) [@ivan.kubyshkin](https://discuss.kotlinlang.org/u/ivan.kubyshkin)\
**Post date:** [February 24, 2020, 8:17pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/2 "2020-02-24T20:17:32Z")

</div>

Failed to reproduce the problem. Do you run your application with `gradlew run -t`?

---

<div class="post-metadata">

**Author:** ![bakerxd](https://avatars.discourse-cdn.com/v4/letter/b/cab0a1/32.png) [@bakerxd](https://discuss.kotlinlang.org/u/bakerxd)\
**Post date:** [February 25, 2020, 1:34am UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/3 "2020-02-25T01:34:58Z")

</div>

Yes. I have tried both gradlew run -t and gradlew run --continuous.

---

<div class="post-metadata">

**Author:** ![ivan.kubyshkin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.kotlinlang.org/ivan.kubyshkin/32/7066_2.png) [@ivan.kubyshkin](https://discuss.kotlinlang.org/u/ivan.kubyshkin)\
**Post date:** [February 25, 2020, 1:02pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/4 "2020-02-25T13:02:44Z")

</div>

Can you attach a link to your project?

---

<div class="post-metadata">

**Author:** ![bakerxd](https://avatars.discourse-cdn.com/v4/letter/b/cab0a1/32.png) [@bakerxd](https://discuss.kotlinlang.org/u/bakerxd)\
**Post date:** [February 25, 2020, 5:49pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/5 "2020-02-25T17:49:49Z")

</div>

I have done some experimentation. My conclusions are that it doesn’t reload properly if I have NPM dependencies on the source sets, like this:

```
sourceSets["main"].dependencies {
    implementation npm("navigo", "7.1.2")
}

```

If I remove the NPM dependencies section it works just fine. It still throws the ENOENT error but it actually reloads the page as it should (so I can safely ignore the error, I guess?)

Anyways, here’s the link of my demo project:

> **[MEGA](https://mega.nz/#!8Ad2TA5Q!mqSHQKZxVDLzVj8ghlVia3P70pu6GbZIcHW6SC_5jCw)**
>
> MEGA provides free cloud storage with convenient and powerful always-on privacy. Claim your free 20GB now

---

<div class="post-metadata">

**Author:** ![bakerxd](https://avatars.discourse-cdn.com/v4/letter/b/cab0a1/32.png) [@bakerxd](https://discuss.kotlinlang.org/u/bakerxd)\
**Post date:** [February 26, 2020, 1:16pm UTC](https://discuss.kotlinlang.org/t/webpack-issues-on-a-gradle-kotlin-js-project/16470/6 "2020-02-26T13:16:19Z")

</div>

UPDATE: Adding these lines on a webpack.config.d/config.js file seems to fix the problem (no more ENOENT errors and it hot reloads properly with NPM dependencies):

```
// noinspection JSUnresolvedVariable
config.devServer = config.devServer || {}; // create devServer in case it is undefined
// noinspection JSUnresolvedVariable
config.devServer.watchOptions = {
    "aggregateTimeout": 5000,
    "poll": 1000
};

```

My theory is that perhaps the Webpack server doesn’t see the converted JavaScript files just right after they are compiled by the Kotlin compiler?

I saw this workaround on the following post: [Kotlin JS + React, unstable building - #3 by Jolanrensen](https://discuss.kotlinlang.org/t/kotlin-js-react-unstable-building/15582/3)