Hi all. I’m trying to upgrade from webpack 4 to we...

# javascript

[Cameron Probert]

Hi all. I’m trying to upgrade from webpack 4 to webpack 5 and I’m having an issue with setting environment variables in build.gradle.kts to pass as arguments to webpack-cli. The following works for webpack 4:

kotlin {
    js {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true
                mode = buildMode
                export = false
            }

            // from <https://discuss.kotlinlang.org/t/kotlin-js-react-accessing-configuring-environment-variables/16906/9>
            val envTargetWebpackArgs = listOf("--env.envTarget=$envTarget", "--env.version=$version")
            webpackTask { args.plusAssign(envTargetWebpackArgs) }
            runTask { args.plusAssign(envTargetWebpackArgs) }
        }

        useCommonJs()
    }

    explicitApi()
}

With the key lines being:

val envTargetWebpackArgs = listOf("--env.envTarget=$envTarget", "--env.version=$version")
webpackTask { args.plusAssign(envTargetWebpackArgs) }
runTask { args.plusAssign(envTargetWebpackArgs) }

The new way of passing env variables in webpack-cli v4 (which is what webpack 5 uses as far as I understand) is to have a space instead of a . (i.e. --env envTarget=$envTarget instead of --env.envTarget=$envTarget)

Neither the old way nor new way seem to work. The webpack.config.js file is not generated in the build directory. Both old and new env arg options error in :browserProductionWebpack with

Starting process 'command '/Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node''. Working directory: /Users/cameron/IdeaProjects/app/build/js/packages/app Command: /Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node /Users/cameron/IdeaProjects/app/build/js/node_modules/webpack/bin/webpack.js --env.envTarget=DEV --env.version=2.3.7 --config /Users/cameron/IdeaProjects/app/build/js/packages/app/webpack.config.js
Successfully started process 'command '/Users/cameron/.gradle/nodejs/node-v16.13.0-darwin-x64/bin/node''
[webpack-cli] Error: Unknown option '--env.envTarget=DEV'
[webpack-cli] Run 'webpack --help' to see available commands and options

But, when I go to the above working directory and execute that command it runs without failing and the webpack.config.js file is generated.

[Szymon Kaczorowski]

You could try instead of "--env key=value" use "--env", "key=value" that worked for me

[Cameron Probert]

Thanks @Szymon Kaczorowski! It didn’t occur to me that now there are spaces in it I should add them as separate arguments!