Concatenation of += operator

[dithom]

Webpack 5.89.0 Plugin version 5.3.10

Bug report

When using the += operator first on a number and then on a string while the compress option is active, the output will be concatenated. This leads to unwanted results at runtime.

Actual Behavior

For example:

x = 100;
x += dist;
x += 'px';

should output

x=100,x+=dist,x+='px'

which outputs 150px at runtime. Instead it outputs

x=100,x+=dist+'px'

So at runtime the result ist not 150px but 10050px.

I came across this while working with https://github.com/ganlanyuan/tiny-slider, see https://github.com/ganlanyuan/tiny-slider/blob/4d709735c417c2483e77a22d017fc1b18c04f0d4/src/tiny-slider.js#L2606.

Expected Behavior

The output should be:

x=100,x+=dist,x+='px'

How Do We Reproduce?

Use the plugin to bundle the TinySlider code, with the following config:

minimizer: [
    new TerserPlugin({
        minify: TerserPlugin.swcMinify,
        terserOptions: {
            compress: true,
        },
        parallel: true,
    }),
],

What I already checked:

• Terser CLI with command --compress --mangle --mangle-props -- node_modules/tiny-slider/src/tiny-slider.js. This does not output the same behavior, which leads me to think the plugin being the issue.
• Checked Terser commits regarding this issue from 5.26.0 to 5.31.5.
• Checked Webpack commits regarding this issue from 5.89.0 to 5.94.0.

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 69.23 MB / 16.00 GB
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
  Browsers:
    Brave Browser: 127.1.68.141
    Safari: 17.5
  Packages:
    css-loader: 6.8.1 => 6.8.1 
    file-loader: 6.2.0 => 6.2.0 
    postcss-loader: 7.3.4 => 7.3.4 
    sass-loader: 13.3.3 => 13.3.3 
    style-loader: 3.3.3 => 3.3.3 
    swc-loader: ^0.2.3 => 0.2.3 
    terser-webpack-plugin: 5.3.10 => 5.3.10 
    webpack: 5.89.0 => 5.89.0 
    webpack-cli: 5.1.4 => 5.1.4 
    webpack-merge: 5.10.0 => 5.10.0 
    webpackbar: 6.0.0 => 6.0.0

Screenshot of the actual issue inside the project:

[alexander-akait]

Please open this issue in terser repo - https://github.com/terser/terser, we just a plugin to run this tool, thank you

[dithom]

@alexander-akait Please see section "What I already checked"

Terser CLI with command --compress --mangle --mangle-props -- node_modules/tiny-slider/src/tiny-slider.js. This does not output the same behavior, which leads me to think the plugin being the issue.

[alexander-akait]

@dithom We don't modify your output at all, check our code, also you use TerserPlugin.swcMinify, it means I point to wrong repo try it here - https://github.com/swc-project/swc

[dithom]

@alexander-akait thanks for the hint! Will try it there.

[alexander-akait]

@dithom Try to comment minify: TerserPlugin.swcMinify and check again

[alexander-akait]

And check your source code, becuse 150 should be number in code, not string