Access to variable before its instantiated

[scolastico]

🐛 bug report

Parcel builds code which accesses an variable before its instantiated.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "@board-bound/base",
  "version": "IN-DEV",
  "source": "src/index.ts",
  "main": "dist/index.cjs",
  "types": "dist/index.d.ts",
  "license": "NPOSL-3.0",
  "scripts": {
    "dev": "cd .. && pnpm dev",
    "watch": "parcel watch --no-hmr",
    "build": "parcel build --no-cache",
    "lint": "eslint -c ./eslint.config.mjs src",
    "lint:fix": "eslint --fix src",
    "prettier": "prettier --check src/**/*.ts",
    "prettier:fix": "prettier --write src/**/*.ts"
  },
  "dependencies": {
    "@board-bound/sdk": "^0.1.0",
    "class-validator": "^0.14.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@parcel/packager-ts": "2.12.0",
    "@parcel/transformer-typescript-types": "2.12.0",
    "@types/node": "^22.7.7",
    "@types/semver": "^7.5.8",
    "@types/uuid": "^10.0.0",
    "axios": "^1.7.7",
    "eslint": "^9.13.0",
    "globals": "^15.11.0",
    "parcel": "^2.12.0",
    "pino": "^9.5.0",
    "prettier": "^3.3.3",
    "typescript": ">=3.0.0",
    "typescript-eslint": "^8.10.0"
  },
  "engines": {
    "node": ">=12"
  },
  "targets": {
    "main": {
      "includeNodeModules": true,
      "sourceMap": {
        "inline": true,
        "inlineSources": true
      }
    }
  },
  "alias": {
    "@board-bound/sdk": "../sdk/src/index.ts"
  }
}

🤔 Expected Behavior

Parcel instantiates the variable before accessing it.

😯 Current Behavior

Parcel produces code which crashes:

[05:04:44.592] ERROR (799877): Failed to load plugin /home/jb/workspace/github.com/board-bound/workspace/base/dist/index.cjs
[05:04:44.592] ERROR (799877): (0 , $2dc7d233ad759ad5$export$71511d61b312f219) is not a function
    err: {
      "type": "TypeError",
      "message": "(0 , $2dc7d233ad759ad5$export$71511d61b312f219) is not a function",
      "stack":
          TypeError: (0 , $2dc7d233ad759ad5$export$71511d61b312f219) is not a function
              at Object.<anonymous> (/home/jb/workspace/github.com/board-bound/workspace/base/dist/index.cjs:881:47)
              at Module._compile (node:internal/modules/cjs/loader:1469:14)
              at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
              at Module.load (node:internal/modules/cjs/loader:1288:32)
              at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
              at Module.require (node:internal/modules/cjs/loader:1311:19)
              at require (node:internal/modules/helpers:179:18)
              at PluginManager.loadPluginWithRequireNoCache (/home/jb/workspace/github.com/board-bound/workspace/server/src/PluginManager.ts:115:20)
              at PluginManager.loadPlugin (/home/jb/workspace/github.com/board-bound/workspace/server/src/PluginManager.ts:129:33)
              at PluginManager.loadPlugins (/home/jb/workspace/github.com/board-bound/workspace/server/src/PluginManager.ts:174:18)
    }

This is because in the loaded index.cjs on line 881 $2dc7d233ad759ad5$export$71511d61b312f219 is accessed:

(0, $2dc7d233ad759ad5$export$71511d61b312f219)([
    $78ab62ded803daa1$var$required
], $78ab62ded803daa1$export$42227c7f4222c700.prototype, "enabled", void 0);

Even tho its declared only after line 1962:

var $2dc7d233ad759ad5$export$71511d61b312f219;
"use strict";

$2dc7d233ad759ad5$export$71511d61b312f219 = (parcelRequire("ej5TP")).__decorate;

💁 Possible Solution

If i manually move the statement right before its accessed, the code works as expected.

🔦 Context

Cant use class-validator because of this issue.

💻 Code Sample

This is the code triggering this state:

// import { IsBoolean, IsNotEmpty, IsNumber, IsOptional, IsPositive, IsString, IsUrl, Length, Max, MaxLength } from "class-validator";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function required(target: any, key: string) {
  let currentValue = target[key];

  Object.defineProperty(target, key, {
    set: (newValue: string) => {
      if (!newValue) {
        throw new Error(`${key} is required.`);
      }
      currentValue = newValue;
    },
    get: () => currentValue,
  });
}

export class PluginConfig {
  authServer = new AuthConfig();
  serverList = new ServerListConfig();
  server = new ServerConfig();
  game = new GameConfig();
}

export class AuthConfig {
  
  // @IsBoolean()
  @required
  enabled = true;
  // @IsUrl()
  url = 'https://auth.board-bound.games';
}

If i apply any decorator, self made ones or a decorator from class-validator the build does this error. As soon as i comment out any decorators, the error also disappears.

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	v20.18.0
pnpm	9.13.2
Operating System	linux/zorin/6.8.0

[scolastico]

Also tested parcel version 2.13.2 without luck.

[scolastico]

Using the babel support with this .babelrc:

{
  "plugins": [
    "@babel/plugin-transform-class-static-block",
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    "@babel/plugin-transform-class-properties"
  ]
}

Seems to be a good workaround in the meantime.