<p dir="auto">Hi,</p>
<p dir="auto">i am new to node packages and i am trying to build the packages and i spent my whole day to find out what might be the issue but i am unable to sort it out. below is my <code class="notranslate">package.json</code> file</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
    &quot;watch&quot;: &quot;cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
    &quot;production&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;,
    &quot;production-noprogress&quot;: &quot;cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.12.10&quot;,
    &quot;@ungap/url-search-params&quot;: &quot;^0.1.2&quot;,
    &quot;@vimeo/player&quot;: &quot;^2.0.1&quot;,
    &quot;axios&quot;: &quot;^0.21.1&quot;,
    &quot;babel-plugin-syntax-dynamic-import&quot;: &quot;^6.18.0&quot;,
    &quot;babel-polyfill&quot;: &quot;^6.26.0&quot;,
    
    &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;,
    &quot;bootstrap&quot;: &quot;^4.1.1&quot;,
    &quot;bootstrap-daterangepicker&quot;: &quot;2.1.27&quot;,
    &quot;bootstrap-sass&quot;: &quot;^3.3.7&quot;,
    &quot;bootstrap-select&quot;: &quot;^1.13.8&quot;,
    &quot;bugsnag-sourcemap-webpack-plugin&quot;: &quot;^0.9.7&quot;,
    &quot;countup.js&quot;: &quot;^1.9.3&quot;,
    &quot;cross-env&quot;: &quot;^3.2.3&quot;,
    &quot;css-loader&quot;: &quot;^0.28.11&quot;,
    &quot;dotenv&quot;: &quot;^5.0.1&quot;,
    &quot;eonasdan-bootstrap-datetimepicker&quot;: &quot;^4.17.47&quot;,
    &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
    &quot;img-loader&quot;: &quot;^2.0.0&quot;,
    &quot;intl-tel-input&quot;: &quot;^12.1.10&quot;,
    &quot;jquery&quot;: &quot;^3.3.1&quot;,
    &quot;jquery-toast-plugin&quot;: &quot;^1.3.2&quot;,
    &quot;js-cookie&quot;: &quot;^2.1.0&quot;,
    &quot;laravel-mix&quot;: &quot;2.1.14&quot;,
    &quot;metismenu&quot;: &quot;^2.7.8&quot;,
    &quot;modernizr&quot;: &quot;^3.6.0&quot;,
    &quot;moment&quot;: &quot;^2.17.1&quot;,
    &quot;moment-timezone&quot;: &quot;^0.4.0&quot;,
    &quot;normalize.css&quot;: &quot;^8.0.1&quot;,
    &quot;nouislider&quot;: &quot;^10.0.0&quot;,
    &quot;numeral&quot;: &quot;^2.0.6&quot;,
    &quot;object.entries&quot;: &quot;^1.0.4&quot;,
    &quot;outdated-browser-rework&quot;: &quot;^2.9.0&quot;,
    &quot;pace-progress&quot;: &quot;^1.0.2&quot;,
    &quot;perfect-scrollbar&quot;: &quot;0.8.1&quot;,
    &quot;popper.js&quot;: &quot;^1.14.3&quot;,
    &quot;promise&quot;: &quot;^7.1.1&quot;,
    &quot;scrollreveal&quot;: &quot;3.4.0&quot;,
    &quot;slick-carousel&quot;: &quot;1.6.0&quot;,
    &quot;sweetalert2&quot;: &quot;^7.24.4&quot;,
    &quot;trix&quot;: &quot;^1.0.0&quot;,
    &quot;ua-parser-js&quot;: &quot;^0.7.20&quot;,
    &quot;underscore&quot;: &quot;^1.8.3&quot;,
    &quot;urijs&quot;: &quot;^1.17.0&quot;,
    &quot;v-img&quot;: &quot;^0.2.0&quot;,
    &quot;vee-validate&quot;: &quot;^2.1.0-beta.2&quot;,
    &quot;vue&quot;: &quot;^2.2.4&quot;,
    &quot;vue-flatpickr-component&quot;: &quot;^8.0.0&quot;,
    &quot;vue-infinite-scroll&quot;: &quot;^2.0.0&quot;,
    &quot;vue-l-carousel&quot;: &quot;^1.0.1&quot;,
    &quot;vue-loader&quot;: &quot;^11.1.4&quot;,
    &quot;vue-multiselect&quot;: &quot;^2.1.0&quot;,
    &quot;vue-template-compiler&quot;: &quot;^2.2.4&quot;,
    &quot;vuex&quot;: &quot;^3.0.1&quot;,
    &quot;weakmap-polyfill&quot;: &quot;^2.0.0&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/preset-env&quot;: &quot;^7.12.11&quot;,
    &quot;babel-core&quot;: &quot;^6.26.3&quot;,
    &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
    &quot;less&quot;: &quot;^3.0.1&quot;,
    &quot;less-loader&quot;: &quot;^4.1.0&quot;
  }
}
"><pre class="notranslate"><code class="notranslate">{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production-noprogress": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@ungap/url-search-params": "^0.1.2",
    "@vimeo/player": "^2.0.1",
    "axios": "^0.21.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-polyfill": "^6.26.0",
    
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.1.1",
    "bootstrap-daterangepicker": "2.1.27",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-select": "^1.13.8",
    "bugsnag-sourcemap-webpack-plugin": "^0.9.7",
    "countup.js": "^1.9.3",
    "cross-env": "^3.2.3",
    "css-loader": "^0.28.11",
    "dotenv": "^5.0.1",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "font-awesome": "^4.7.0",
    "img-loader": "^2.0.0",
    "intl-tel-input": "^12.1.10",
    "jquery": "^3.3.1",
    "jquery-toast-plugin": "^1.3.2",
    "js-cookie": "^2.1.0",
    "laravel-mix": "2.1.14",
    "metismenu": "^2.7.8",
    "modernizr": "^3.6.0",
    "moment": "^2.17.1",
    "moment-timezone": "^0.4.0",
    "normalize.css": "^8.0.1",
    "nouislider": "^10.0.0",
    "numeral": "^2.0.6",
    "object.entries": "^1.0.4",
    "outdated-browser-rework": "^2.9.0",
    "pace-progress": "^1.0.2",
    "perfect-scrollbar": "0.8.1",
    "popper.js": "^1.14.3",
    "promise": "^7.1.1",
    "scrollreveal": "3.4.0",
    "slick-carousel": "1.6.0",
    "sweetalert2": "^7.24.4",
    "trix": "^1.0.0",
    "ua-parser-js": "^0.7.20",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "v-img": "^0.2.0",
    "vee-validate": "^2.1.0-beta.2",
    "vue": "^2.2.4",
    "vue-flatpickr-component": "^8.0.0",
    "vue-infinite-scroll": "^2.0.0",
    "vue-l-carousel": "^1.0.1",
    "vue-loader": "^11.1.4",
    "vue-multiselect": "^2.1.0",
    "vue-template-compiler": "^2.2.4",
    "vuex": "^3.0.1",
    "weakmap-polyfill": "^2.0.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.12.11",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "less": "^3.0.1",
    "less-loader": "^4.1.0"
  }
}

</code></pre></div>
<h3 dir="auto"><g-emoji class="g-emoji" alias="computer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png">💻</g-emoji></h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Would you like to work on a fix?</li>
</ul>
<h3 dir="auto">How are you using Babel?</h3>
<p dir="auto">Programmatic API (<code class="notranslate">babel.transform</code>, <code class="notranslate">babel.parse</code>)</p>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="fn(class WorkerClient {
  static #worker_threads() {
    return WorkerClient;
  }
});"><pre class="notranslate"><span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-k">class</span> <span class="pl-v">WorkerClient</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> #<span class="pl-en">worker_threads</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-v">WorkerClient</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><a href="https://babeljs.io/repl#?browsers=chrome%2060&amp;build=&amp;builtIns=false&amp;corejs=false&amp;spec=false&amp;loose=false&amp;code_lz=GYOwFAxgNghgznABAdQPYCcDWBTdBhKAS2xABdEBvAKEUTlJlMIkQGIB3DHdAfVIAt02GABM4YAJSUatRENIBXdCBRdcBYmQDcMgL5VdErUA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=true&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=script&amp;lineWrap=true&amp;presets=env&amp;prettier=false&amp;targets=&amp;version=7.14.4" rel="nofollow">REPL</a></p>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Configuration</h3>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;plugins&quot;: [
    &quot;@babel/plugin-proposal-private-methods&quot;,
    &quot;@babel/plugin-proposal-class-properties&quot;
  ]
}"><pre class="notranslate">{
  <span class="pl-ent">"plugins"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-proposal-private-methods<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-proposal-class-properties<span class="pl-pds">"</span></span>
  ]
}</pre></div>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">It is compiled to this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var _class;

fn(_class = class WorkerClient {});

function _worker_threads() {
  return WorkerClient;
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">_class</span><span class="pl-kos">;</span>

<span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">_class</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">WorkerClient</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">_worker_threads</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-v">WorkerClient</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">As you can see, <code class="notranslate">WorkerClient</code> is not reachable. It should be compiled to something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var _class;

fn(_class = class WorkerClient {});

function _worker_threads() {
  return _class;
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">_class</span><span class="pl-kos">;</span>

<span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">_class</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">WorkerClient</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">_worker_threads</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-s1">_class</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Environment</h3>
<ul dir="auto">
<li>Babel 7.14.4</li>
</ul>
<h3 dir="auto">Possible solution</h3>
<p dir="auto">In the <code class="notranslate">replaceThisContext</code> function that we use to replace <code class="notranslate">this</code> usage in class fields and private methods:<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/813f2a3cce04a5366de7c1cc370652db64507305/packages/babel-helper-create-class-features-plugin/src/fields.ts#L672">babel/packages/babel-helper-create-class-features-plugin/src/fields.ts</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 672
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/813f2a3cce04a5366de7c1cc370652db64507305">813f2a3</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L672" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="672"></td>
          <td id="LC672" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">function</span> <span class="pl-en">replaceThisContext</span><span class="pl-kos">(</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">we should add a new <code class="notranslate">path.traverse</code> call to replace references to the inner binding, with a visitor similar to this one:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const innerReferencesVisitor = {
  ReferencedIdentifier(path, state) {
    const { name } = path.node;
    if (path.scope.bindingIdentifierEquals(name, state.innerBinding)) {
      state.needsClassRef = true;
      path.replaceWith(t.cloneNode(state.classRef));
    }
  },
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">innerReferencesVisitor</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-en">ReferencedIdentifier</span><span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> name <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">;</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">scope</span><span class="pl-kos">.</span><span class="pl-en">bindingIdentifierEquals</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">innerBinding</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">needsClassRef</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
      <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">replaceWith</span><span class="pl-kos">(</span><span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-en">cloneNode</span><span class="pl-kos">(</span><span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">classRef</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">where <code class="notranslate">state</code> is the one used by <code class="notranslate">thisContextVisitor</code> with the addition of <code class="notranslate">state.innerBinding</code>, which is the node representing the id of the class expression.</p>
<p dir="auto">Note that we don't need to merge this visitor with <code class="notranslate">environmentVisitor</code>: <code class="notranslate">environmentVisitor</code> is only needed to avoid replacing nested <code class="notranslate">this</code>es that don't refer to the class, while for normal bindings we use <code class="notranslate">path.scope.bindingIdentifierEquals</code>.</p>
<p dir="auto">We can get <code class="notranslate">innerBinding</code> from right before extracting the class reference at </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/813f2a3cce04a5366de7c1cc370652db64507305/packages/babel-helper-create-class-features-plugin/src/index.ts#L173-L178">babel/packages/babel-helper-create-class-features-plugin/src/index.ts</a>
    </p>
    <p class="mb-0 color-fg-muted">
        Lines 173 to 178
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/813f2a3cce04a5366de7c1cc370652db64507305">813f2a3</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L173" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="173"></td>
          <td id="LC173" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">isClassExpression</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-c1">!</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L174" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="174"></td>
          <td id="LC174" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-en">nameFunction</span><span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L175" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="175"></td>
          <td id="LC175" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">ref</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">scope</span><span class="pl-kos">.</span><span class="pl-en">generateUidIdentifier</span><span class="pl-kos">(</span><span class="pl-s">"class"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L176" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="176"></td>
          <td id="LC176" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L177" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="177"></td>
          <td id="LC177" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">ref</span> <span class="pl-c1">=</span> <span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-en">cloneNode</span><span class="pl-kos">(</span><span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">)</span><span class="pl-kos">;</span> </td>
        </tr>

        <tr class="border-0">
          <td id="L178" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="178"></td>
          <td id="LC178" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">}</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">We only need to get it if we have a <code class="notranslate">ClassExpression</code> and <code class="notranslate">path.node.id</code> is set, otherwise we can leave <code class="notranslate">innerBinding</code> as <code class="notranslate">undefined</code> and use it as a "signal" to skip the new <code class="notranslate">path.traverse</code> call.</p>
<p dir="auto">After working on the fix itself, we'll need a bunch of tests:</p>
<ul dir="auto">
<li>A simple <code class="notranslate">input.js</code>/<code class="notranslate">output.js</code> test, for example my original example</li>
<li>An <code class="notranslate">exec.js</code> test, to check that the binding is the correct one. For example:
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let x = class Test {
  static #getTest() { return Test }
  static getTest() { return this.getTest() }
};

expect(x.getTest()).toBe(x);"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> #<span class="pl-en">getTest</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-v">Test</span> <span class="pl-kos">}</span>
  <span class="pl-k">static</span> <span class="pl-en">getTest</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">getTest</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">getTest</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
<li>An <code class="notranslate">input</code>/<code class="notranslate">output</code> test to verify that it works when the binding is used in nested scopes, for example:
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let x = class Test {
  static #method() {
    return function inner() {
      return Test;
    };
  }
}"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> #<span class="pl-en">method</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">function</span> <span class="pl-en">inner</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-v">Test</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
</li>
<li>An <code class="notranslate">input</code>/<code class="notranslate">output</code> test to verify that it doesn't rewrite shadowed bindings:
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let x = class Test {
  static #method() {
    new Test();

    return function inner() {
      let Test = 2;
      return Test;
    };
  }
}"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-k">class</span> <span class="pl-v">Test</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> #<span class="pl-en">method</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">new</span> <span class="pl-v">Test</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-k">function</span> <span class="pl-en">inner</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">let</span> <span class="pl-v">Test</span> <span class="pl-c1">=</span> <span class="pl-c1">2</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-v">Test</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
</li>
</ul>
<h3 dir="auto">Additional context</h3>
<p dir="auto">The same bug happens with static class fields (both public and private) and instance private methods:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="fn(class WorkerClient {
  static #x = WorkerClient;
  static y = WorkerClient;
});"><pre class="notranslate"><span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-k">class</span> <span class="pl-v">WorkerClient</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> #<span class="pl-c1">x</span> <span class="pl-c1">=</span> <span class="pl-v">WorkerClient</span><span class="pl-kos">;</span>
  <span class="pl-k">static</span> <span class="pl-c1">y</span> <span class="pl-c1">=</span> <span class="pl-v">WorkerClient</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">we should duplicate the tests for those cases.</p>