[Bug]: Incorrect tree-shaking during production build when using decorators with webpack

[Sayan751]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

// data.js

const testVarOne = `
Hello this is test var one
`

const testVarTwo = `
${testVarOne}

Hello this is test var two
`

const testObj = {
  one: `${testVarOne}`,
  two: `${testVarOne}`,
}

export {
  testVarTwo,
  testObj,
}

// decorator.js
export function bar(target, context) {
    console.log('bar invoked', target, context);
}

// my-element.js

import { testObj } from './data';
import { bar } from './decorator';

@bar
export class MyElement {
    prop = testObj.one;

}

Configuration file name

babel.config.json

Configuration

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "2023-11"
      }
    ]
  ]
}

Current and expected behavior

Current behavior

When using the decorator @bar on the class, running the production build throws the following error:

Uncaught ReferenceError: testVarOne is not defined

It seemed that testVarOne is tree-shaked.

If you remove the decorator usage, then it works fine.

Expected behavior

It works also with decorator.

Environment

System:
- OS: Windows 11 10.0.22635

Binaries:
- Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
- Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
- npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD

npmPackages:
- @babel/core: ^7.24.4 => 7.24.4
- @babel/plugin-proposal-decorators: ^7.24.1 => 7.24.1
- babel-loader: ^9.1.3 => 9.1.3
- webpack: ^5.91.0 => 5.91.0

Possible solution

No response

Additional context

Reproduction: https://github.com/Sayan751/babel-webpack-demo

[babel-bot]

Hey @Sayan751! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[liuxingbaoyu]

This is a terser bug, if I disable optimization it works.

    optimization: {
      minimize: false,
    },

https://try.terser.org/
Put the following code in repl to reproduce this bug,

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
var __webpack_exports__ = {};

;// CONCATENATED MODULE: ./src/data.js
const testVarOne = `
Hello this is test var one
`;
const testVarTwo = (/* unused pure expression or super */ null && (`
${testVarOne}

Hello this is test var two
`));
const testObj = {
  one: `${testVarOne}`,
  two: `${testVarOne}`
};

;// CONCATENATED MODULE: ./src/decorator.js
function bar(target, context) {
  console.log('bar invoked', target, context);
}
;// CONCATENATED MODULE: ./src/my-element.js
let _initClass;
function _applyDecs(e, t, n, r, o, i) { var a, c, u, s, f, l, p, d = Symbol.metadata || Symbol.for("Symbol.metadata"), m = Object.defineProperty, h = Object.create, y = [h(null), h(null)], v = t.length; function g(t, n, r) { return function (o, i) { n && (i = o, o = e); for (var a = 0; a < t.length; a++) i = t[a].apply(o, r ? [i] : []); return r ? i : o; }; } function b(e, t, n, r) { if ("function" != typeof e && (r || void 0 !== e)) throw new TypeError(t + " must " + (n || "be") + " a function" + (r ? "" : " or undefined")); return e; } function applyDec(e, t, n, r, o, i, u, s, f, l, p) { function d(e) { if (!p(e)) throw new TypeError("Attempted to access private element on non-instance"); } var h = [].concat(t[0]), v = t[3], w = !u, D = 1 === o, S = 3 === o, j = 4 === o, E = 2 === o; function I(t, n, r) { return function (o, i) { return n && (i = o, o = e), r && r(o), P[t].call(o, i); }; } if (!w) { var P = {}, k = [], F = S ? "get" : j || D ? "set" : "value"; if (f ? (l || D ? P = { get: _setFunctionName(function () { return v(this); }, r, "get"), set: function (e) { t[4](this, e); } } : P[F] = v, l || _setFunctionName(P[F], r, E ? "" : F)) : l || (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) { if ((c = y[+s][r]) && 7 != (c ^ o)) throw Error("Decorating two elements with the same name (" + P[F].name + ") is not supported yet"); y[+s][r] = o < 3 ? 1 : o; } } for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) { var z = b(h[O], "A decorator", "be", !0), A = n ? h[O - 1] : void 0, H = {}, K = { kind: ["field", "accessor", "method", "getter", "setter", "class"][o], name: r, metadata: a, addInitializer: function (e, t) { if (e.v) throw Error("attempted to call addInitializer after decoration was finished"); b(t, "An initializer", "be", !0), i.push(t); }.bind(null, H) }; if (w) c = z.call(A, N, K), H.v = 1, b(c, "class decorators", "return") && (N = c);else if (K.static = s, K.private = f, c = K.access = { has: f ? p.bind() : function (e) { return r in e; } }, j || (c.get = f ? E ? function (e) { return d(e), P.value; } : I("get", 0, d) : function (e) { return e[r]; }), E || S || (c.set = f ? I("set", 0, d) : function (e, t) { e[r] = t; }), N = z.call(A, D ? { get: P.get, set: P.set } : P[F], K), H.v = 1, D) { if ("object" == typeof N && N) (c = b(N.get, "accessor.get")) && (P.get = c), (c = b(N.set, "accessor.set")) && (P.set = c), (c = b(N.init, "accessor.init")) && k.unshift(c);else if (void 0 !== N) throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined"); } else b(N, (l ? "field" : "method") + " decorators", "return") && (l ? k.unshift(N) : P[F] = N); } return o < 2 && u.push(g(k, s, 1), g(i, s, 0)), l || w || (f ? D ? u.splice(-1, 0, I("get", s), I("set", s)) : u.push(E ? P[F] : b.call.bind(P[F])) : m(e, r, P)), N; } function w(e) { return m(e, d, { configurable: !0, enumerable: !0, value: a }); } return void 0 !== i && (a = i[d]), a = h(null == a ? null : a), f = [], l = function (e) { e && f.push(g(e)); }, p = function (t, r) { for (var i = 0; i < n.length; i++) { var a = n[i], c = a[1], l = 7 & c; if ((8 & c) == t && !l == r) { var p = a[2], d = !!a[3], m = 16 & c; applyDec(t ? e : e.prototype, a, m, d ? "#" + p : _toPropertyKey(p), l, l < 2 ? [] : t ? s = s || [] : u = u || [], f, !!t, d, r, t && d ? function (t) { return _checkInRHS(t) === e; } : o); } } }, p(8, 0), p(0, 0), p(8, 1), p(0, 1), l(u), l(s), c = f, v || w(e), { e: c, get c() { var n = []; return v && [w(e = applyDec(e, [t], r, e.name, 5, n)), g(n, 1)]; } }; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _setFunctionName(e, t, n) { "symbol" == typeof t && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? typeof e : "null")); return e; }


let _MyElement;
class MyElement {
  static {
    [_MyElement, _initClass] = _applyDecs(this, [bar], []).c;
  }
  prop = testObj.one;
  static {
    _initClass();
  }
}

;// CONCATENATED MODULE: ./src/main.js

const foo = new _MyElement();
document.querySelector('my-app').textContent = foo.prop;
/******/ })()
;