Webpack 5.109.0 was released yesterday. When using...

# javascript

[Robert Jaros]

Webpack 5.109.0 was released yesterday. When using npm for dependency management (kotlin.js.yarn=false) the new version is automatically used and my Kotlin/JS project no longer builds (neither dev nor production). More in 🧵

[Robert Jaros]

The error looks like this:

Module parse failed: Cannot use 'in' operator to search for 'start' in undefined
File was parsed as module type 'javascript/esm'.
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
TypeError: Cannot use 'in' operator to search for 'start' in undefined
    at set loc (/home/rjaros/git/finn/eizba/build/js/packages/eizba-front/node_modules/webpack/lib/Dependency.js:161:15)
    at constDependency (/home/rjaros/git/finn/eizba/build/js/packages/eizba-front/node_modules/webpack/lib/javascript/JavascriptParserHelpers.js:126:11)
    at /home/rjaros/git/finn/eizba/build/js/packages/eizba-front/node_modules/webpack/lib/DefinePlugin.js:620:53
    at Hook.eval [as call] (eval at create (/home/rjaros/git/finn/eizba/build/js/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/home/rjaros/git/finn/eizba/build/js/node_modules/tapable/lib/Hook.js:16:14)
    at JavascriptParser._callHooksForInfo (/home/rjaros/git/finn/eizba/build/js/node_modules/webpack/lib/javascript/JavascriptParser.js:4733:24)
    at JavascriptParser.callHooksForName (/home/rjaros/git/finn/eizba/build/js/node_modules/webpack/lib/javascript/JavascriptParser.js:4650:15)
    at JavascriptParser.walkIdentifier (/home/rjaros/git/finn/eizba/build/js/node_modules/webpack/lib/javascript/JavascriptParser.js:4575:8)
    at JavascriptParser.walkExpression (/home/rjaros/git/finn/eizba/build/js/node_modules/webpack/lib/javascript/JavascriptParser.js:3599:10)
    at JavascriptParser.walkLeftRightExpression (/home/rjaros/git/finn/eizba/build/js/node_modules/webpack/lib/javascript/JavascriptParser.js:4019:8)

[Robert Jaros]

Using standard yarn works OK (webpack 5.101.3 is used).

[Robert Jaros]

Forcing webpack downgrade with

rootProject.extensions.findByType(BaseNpmExtension::class.java)?.apply {
    override("webpack", "5.108.4")
}

also fixes the issue.

[Robert Jaros]

It's not a general problem because some smaller apps work OK. But my larger project with many dependencies does not work. Anyone has similar issue?

[Robert Jaros]

Any idea how to debug this to determine whether it's a Kotlin/JS or Webpack issue?

[turansky]

> Any idea how to debug this to determine whether it's a Kotlin/JS or Webpack issue?
Try to use Vite? 😉

[Artem Kobzar]

@Adam Semenenko ^^

[Artem Kobzar]

@Ilya Goncharov [JB] also could be interesting cause potentially also it harms Wasm

[Edoardo Luppi]

Which version of Kotlin? I've just tried and could not reproduce.
The version is correctly pinned to 101.3 on 2.4.0

[Edoardo Luppi]

On 2.4.20-Beta2, it is correctly pinned to 5.108.1.

[Robert Jaros]

2.4.0, but only using kotlin.js.yarn=false property

[Robert Jaros]

That's very strange, but based on the stack trace above, I managed to find the cause of the problem. It's my usage of webpack.DefinePlugin.

[Robert Jaros]

I'm putting this into `webpack.config.d`:

;(function() {
    const webpack = require('webpack')
    config.plugins.push(new webpack.DefinePlugin({
        kv_build_mode: JSON.stringify(config.mode),
    }));
})();

[Robert Jaros]

and then use external val kv_build_mode: String in Kotlin code

[Robert Jaros]

It doesn't work with webpack 5.109.0 anymore.

[Robert Jaros]

It seems they made some major changes to the plugin: https://github.com/webpack/webpack/commit/032e76dafb65dbce3eaf1cfc252430f44923f21a

[Robert Jaros]

After an hour of experiments I haven't found a single working way to use DefinePlugin with Kotlin. I'm giving up. I'll just try to use import.meta.env for mode detection.

[Robert Jaros]

And one more thing puzzles me. Why is pinned webpack version used when using yarn but latest available version when using npm. Could this be KGP bug or just npm limitation?

[Edoardo Luppi]

It is probably an issue in your environment, caused by how the various Webpack installations are hoisted in node_modules folders.

You should see a node_modules/webpack entry in the lockfile that is pinned correctly.

[Edoardo Luppi]

Note that it might very well be a Webpack bug. It would not be the first time they break stuff on minor releases.

[Adam Semenenko]

hmm could be related to recent KGP change
https://github.com/JetBrains/kotlin/commit/1ca7fb96a4610b68a59aa3fbd65aaf60af168324
https://youtrack.jetbrains.com/issue/KT-83171