<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">Other (Next.js, Gatsby, vue-cli, ...)</p>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const API_VERSION = 4;

class Bruh {
  public a_method(): void {
    console.log(this._version);
  }
  public constructor(
    public options: string,
    private readonly _version: number = API_VERSION
  ) {
    console.log(this.options);
  }
}
var instance = new Bruh(&quot;👀&quot;);
instance.a_method();"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">API_VERSION</span> <span class="pl-c1">=</span> <span class="pl-c1">4</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-smi">Bruh</span> <span class="pl-kos">{</span>
  <span class="pl-k">public</span> <span class="pl-en">a_method</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_version</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">public</span> <span class="pl-en">constructor</span><span class="pl-kos">(</span>
    <span class="pl-k">public</span> <span class="pl-s1">options</span>: <span class="pl-smi">string</span><span class="pl-kos">,</span>
    <span class="pl-k">private</span> <span class="pl-k">readonly</span> <span class="pl-s1">_version</span>: <span class="pl-smi">number</span> <span class="pl-c1">=</span> <span class="pl-smi">API_VERSION</span>
  <span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">options</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">var</span> <span class="pl-s1">instance</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">Bruh</span><span class="pl-kos">(</span><span class="pl-s">"👀"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">instance</span><span class="pl-kos">.</span><span class="pl-en">a_method</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto">babel.config.js</p>
<h3 dir="auto">Configuration</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  presets: [&quot;@babel/preset-typescript&quot;, &quot;@parcel/babel-preset-env&quot;]
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span><span class="pl-s">"@babel/preset-typescript"</span><span class="pl-kos">,</span> <span class="pl-s">"@parcel/babel-preset-env"</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">🤔 Expected Behavior</h2>
<p dir="auto"><code class="notranslate">👀</code> and then <code class="notranslate">4</code> is logged to the console.</p>
<h2 dir="auto"><g-emoji class="g-emoji" alias="hushed" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f62f.png">😯</g-emoji> Current Behavior</h2>
<p dir="auto"><code class="notranslate">undefined</code> and then <code class="notranslate">undefined</code> is logged to the console.</p>
<h3 dir="auto">Environment</h3>
<table role="table">
<thead>
<tr>
<th>Software</th>
<th>Version(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Parcel</td>
<td>2.0.0-nightly.912+145bfb82</td>
</tr>
<tr>
<td>Node</td>
<td>v17.0.1</td>
</tr>
<tr>
<td>npm/Yarn</td>
<td>3.1.0</td>
</tr>
<tr>
<td>Operating System</td>
<td>macOS 10.15.7 (19H1419)</td>
</tr>
<tr>
<td>@babel/core</td>
<td>7.16.0</td>
</tr>
</tbody>
</table>
<h3 dir="auto">Possible solution</h3>
<p dir="auto">Make so that it works correctly.</p>
<h3 dir="auto">Additional context</h3>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1055170204" data-permission-text="Title is private" data-url="https://github.com/parcel-bundler/parcel/issues/7313" data-hovercard-type="issue" data-hovercard-url="/parcel-bundler/parcel/issues/7313/hovercard" href="https://github.com/parcel-bundler/parcel/issues/7313">parcel-bundler/parcel#7313</a></p>
<p dir="auto"><a href="https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties" rel="nofollow">https://www.typescriptlang.org/docs/handbook/2/classes.html#parameter-properties</a></p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current behavior</strong><br>
When <code class="notranslate">@babel/preset-typescript</code> is placed before <code class="notranslate">@babel/preset-env</code> in the presets array and <code class="notranslate">@babel/preset-env</code> is configured to transform classes (by setting target to include ie 11), class parameter properties are not transpiled which will cause runtime exceptions.</p>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Foo {
  constructor(public bar: number) {}
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-k">public</span> <span class="pl-s1">bar</span>: <span class="pl-smi">number</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">compiles to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

var Foo = function Foo(bar) {
  _classCallCheck(this, Foo);
};"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-s1">instance</span><span class="pl-kos">,</span> <span class="pl-v">Constructor</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-kos">(</span><span class="pl-s1">instance</span> <span class="pl-k">instanceof</span> <span class="pl-v">Constructor</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">TypeError</span><span class="pl-kos">(</span><span class="pl-s">"Cannot call a class as a function"</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">var</span> <span class="pl-v">Foo</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-v">Foo</span><span class="pl-kos">(</span><span class="pl-s1">bar</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-v">Foo</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">.babelrc.json</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;@babel/typescript&quot;,
    [&quot;@babel/env&quot;, {
      &quot;targets&quot;: &quot;ie 11&quot;
    }]
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "@babel/typescript",
    ["@babel/env", {
      "targets": "ie 11"
    }]
  ]
}
</code></pre></div>
<p dir="auto">The same result can be produced by using the <code class="notranslate">@babel/transform-classes</code> plugin directly:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ babel --no-babelrc --plugins @babel/transform-classes,@babel/transform-typescript test.ts"><pre class="notranslate"><code class="notranslate">$ babel --no-babelrc --plugins @babel/transform-classes,@babel/transform-typescript test.ts
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
With the preset order reversed, it successfully compiles down to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

var Foo = function Foo(bar) {
  _classCallCheck(this, Foo);

  this.bar = bar;
};"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-s1">instance</span><span class="pl-kos">,</span> <span class="pl-v">Constructor</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-kos">(</span><span class="pl-s1">instance</span> <span class="pl-k">instanceof</span> <span class="pl-v">Constructor</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">TypeError</span><span class="pl-kos">(</span><span class="pl-s">"Cannot call a class as a function"</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">var</span> <span class="pl-v">Foo</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-v">Foo</span><span class="pl-kos">(</span><span class="pl-s1">bar</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-v">Foo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">bar</span> <span class="pl-c1">=</span> <span class="pl-s1">bar</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Possible Solution</strong><br>
This seems to be a limitation of plugin ordering where the class is compiled down to a function by preset-env before typescript can properly transform the parameter properties and does not look like it can easily be fixed. I suggest documenting this plugin ordering issue under the typescript preset/plugin docs so that people are aware of it since babel/preset-env is a very common preset that people will be using with typescript.</p>