<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">babel-loader (webpack)</p>
<h3 dir="auto">Input code</h3>
<p dir="auto">Minimal repository here <a href="https://github.com/Badestrand/webpack-error-stripping-preact-import/tree/main">https://github.com/Badestrand/webpack-error-stripping-preact-import/tree/main</a></p>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto">.babelrc</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;presets&quot;: [
		&quot;@babel/preset-env&quot;,
		&quot;@babel/preset-react&quot;,
		&quot;@babel/preset-typescript&quot;
	],
	&quot;plugins&quot;: [
		[
			&quot;@babel/plugin-transform-runtime&quot;, {
				&quot;regenerator&quot;: true
			}
		],
		[&quot;@babel/plugin-transform-react-jsx&quot;, {
			&quot;pragma&quot;: &quot;preact.h&quot;,
			&quot;pragmaFrag&quot;: &quot;preact.Fragment&quot;,
		}]
	]
}"><pre class="notranslate">{
	<span class="pl-ent">"presets"</span>: [
		<span class="pl-s"><span class="pl-pds">"</span>@babel/preset-env<span class="pl-pds">"</span></span>,
		<span class="pl-s"><span class="pl-pds">"</span>@babel/preset-react<span class="pl-pds">"</span></span>,
		<span class="pl-s"><span class="pl-pds">"</span>@babel/preset-typescript<span class="pl-pds">"</span></span>
	],
	<span class="pl-ent">"plugins"</span>: [
		[
			<span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-transform-runtime<span class="pl-pds">"</span></span>, {
				<span class="pl-ent">"regenerator"</span>: <span class="pl-c1">true</span>
			}
		],
		[<span class="pl-s"><span class="pl-pds">"</span>@babel/plugin-transform-react-jsx<span class="pl-pds">"</span></span>, {
			<span class="pl-ent">"pragma"</span>: <span class="pl-s"><span class="pl-pds">"</span>preact.h<span class="pl-pds">"</span></span>,
			<span class="pl-ent">"pragmaFrag"</span>: <span class="pl-s"><span class="pl-pds">"</span>preact.Fragment<span class="pl-pds">"</span></span>,
		}]
	]
}</pre></div>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">I have a simple Typescript JSX preact (it's very similar to React) component:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as preact from 'preact'

export default function MyComponent() {
	return (
		&lt;div&gt;&lt;/div&gt;
	)
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">preact</span> <span class="pl-k">from</span> <span class="pl-s">'preact'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-smi">MyComponent</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-kos">(</span>
		<span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
	<span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This gets compiled to</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/***/ &quot;./src/MyComponent.tsx&quot;:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) =&gt; {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   &quot;default&quot;: () =&gt; (/* binding */ MyComponent)
/* harmony export */ });
function MyComponent() {
  return preact.h(&quot;div&quot;, null);
}
/***/ }),"><pre class="notranslate"><span class="pl-c">/***/</span> <span class="pl-s">"./src/MyComponent.tsx"</span>:
<span class="pl-c">/***/</span> <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">__unused_webpack_module</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_exports__</span><span class="pl-kos">,</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
<span class="pl-s1">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-en">r</span><span class="pl-kos">(</span><span class="pl-s1">__webpack_exports__</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">/* harmony export */</span> <span class="pl-s1">__webpack_require__</span><span class="pl-kos">.</span><span class="pl-en">d</span><span class="pl-kos">(</span><span class="pl-s1">__webpack_exports__</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
<span class="pl-c">/* harmony export */</span>   <span class="pl-s">"default"</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-c">/* binding */</span> <span class="pl-v">MyComponent</span><span class="pl-kos">)</span>
<span class="pl-c">/* harmony export */</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-v">MyComponent</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">preact</span><span class="pl-kos">.</span><span class="pl-en">h</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-c">/***/</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">So you can see that the preact import was removed even though preact is used by the JSX. This throws an error when executing the code.</p>
<p dir="auto">I found in <a href="https://github.com/babel/babel/issues/9723" data-hovercard-type="issue" data-hovercard-url="/babel/babel/issues/9723/hovercard">this issue</a> that Typescript removes unused imports and I think that's what's happening here - it's just that this import shouldn't be removed.</p>
<p dir="auto">I guess the system determines first which imports are used/unused and only AFTER resolves the JSX.</p>
<p dir="auto">I first filed a bug for <a href="https://github.com/webpack/webpack/issues/15707" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/15707/hovercard">webpack</a> but the maintainer felt it could be better suited here.</p>
<h3 dir="auto">Environment</h3>
<p dir="auto">System:<br>
OS: macOS 12.2.1<br>
Binaries:<br>
Node: 14.15.0 - /usr/local/bin/node<br>
Yarn: 1.6.0 - /usr/local/bin/yarn<br>
npm: 6.14.8 - /usr/local/bin/npm<br>
npmPackages:<br>
@babel/core: ^7.17.9 =&gt; 7.17.9<br>
@babel/plugin-transform-runtime: ^7.17.0 =&gt; 7.17.0<br>
@babel/preset-env: ^7.16.11 =&gt; 7.16.11<br>
@babel/preset-react: ^7.16.7 =&gt; 7.16.7<br>
@babel/preset-typescript: ^7.16.7 =&gt; 7.16.7<br>
@babel/runtime: ^7.17.9 =&gt; 7.17.9<br>
babel-core: ^6.26.3 =&gt; 6.26.3<br>
babel-loader: ^8.2.5 =&gt; 8.2.5<br>
babel-preset-react: ^6.24.1 =&gt; 6.24.1<br>
webpack: ^5.72.0 =&gt; 5.72.0</p>
<h3 dir="auto">Possible solution</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Additional context</h3>
<p dir="auto"><em>No response</em></p>
<h2 dir="auto">Bug Report</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I would like to work on a fix!</li>
</ul>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { h, render } from &quot;preact&quot;;

const root = document.getElementById(&quot;root&quot;);

render(&lt;div&gt;hello&lt;/div&gt;, root);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">h</span><span class="pl-kos">,</span> <span class="pl-s1">render</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"preact"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"root"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>hello<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { render } from &quot;preact&quot;; // `h` import is gone
const root = document.getElementById(&quot;root&quot;);
render(h(&quot;div&quot;, null, &quot;hello&quot;), root);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">render</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"preact"</span><span class="pl-kos">;</span> <span class="pl-c">// `h` import is gone</span>
<span class="pl-k">const</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"root"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-en">h</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s">"hello"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { h, render } from &quot;preact&quot;;
const root = document.getElementById(&quot;root&quot;);
render(h(&quot;div&quot;, null, &quot;hello&quot;), root);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">h</span><span class="pl-kos">,</span> <span class="pl-s1">render</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"preact"</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"root"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-en">h</span><span class="pl-kos">(</span><span class="pl-s">"div"</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-s">"hello"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">root</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)</strong></p>
<ul dir="auto">
<li>Filename: <code class="notranslate">.babelrc</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
	&quot;presets&quot;: [
		&quot;@babel/preset-typescript&quot;,
		[&quot;@babel/preset-react&quot;, { &quot;pragma&quot;: &quot;h&quot; }]
	]
}"><pre class="notranslate"><span class="pl-kos">{</span>
	<span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
		<span class="pl-s">"@babel/preset-typescript"</span><span class="pl-kos">,</span>
		<span class="pl-kos">[</span><span class="pl-s">"@babel/preset-react"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"pragma"</span>: <span class="pl-s">"h"</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"><strong>Environment</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.15.3 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/opt/node@14/bin/npm
  npmPackages:
    @babel/cli: ^7.12.10 =&gt; 7.12.10
    @babel/core: ^7.0.0 =&gt; 7.12.10
    @babel/preset-react: ^7.12.10 =&gt; 7.12.10
    @babel/preset-typescript: ^7.12.7 =&gt; 7.12.7
"><pre class="notranslate"><code class="notranslate">  System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.15.3 - /usr/local/opt/node@14/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/opt/node@14/bin/npm
  npmPackages:
    @babel/cli: ^7.12.10 =&gt; 7.12.10
    @babel/core: ^7.0.0 =&gt; 7.12.10
    @babel/preset-react: ^7.12.10 =&gt; 7.12.10
    @babel/preset-typescript: ^7.12.7 =&gt; 7.12.7

</code></pre></div>
<p dir="auto"><strong>Additional context</strong><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="777460584" data-permission-text="Title is private" data-url="https://github.com/parcel-bundler/parcel/issues/5566" data-hovercard-type="issue" data-hovercard-url="/parcel-bundler/parcel/issues/5566/hovercard" href="https://github.com/parcel-bundler/parcel/issues/5566">parcel-bundler/parcel#5566</a></p>