<p dir="auto">The file below will compile  (--target es5, --module commonjs, --jsx "preserve")  but not run, because the require statement is optimized away.</p>

 In the subsequent JSX translation, the `<div dir="auto"></div>` elements are translated to `React.createElement()` calls which are then no longer possible.

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React = require(&quot;react&quot;);

export function render(): JSX.Element {
   return (&lt;div&gt;&lt;/div&gt;);
}"><pre class="notranslate"><code class="notranslate">import React = require("react");

export function render(): JSX.Element {
   return (&lt;div&gt;&lt;/div&gt;);
}
</code></pre></div>
<p dir="auto">My current workaround is this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/* tslint:disable:no-unused-expressions */
import React = require(&quot;react&quot;); React
/* tslint:enable:no-unused-expressions */

export function render(): JSX.Element {
   return (&lt;div&gt;&lt;/div&gt;);
}"><pre class="notranslate"><code class="notranslate">/* tslint:disable:no-unused-expressions */
import React = require("react"); React
/* tslint:enable:no-unused-expressions */

export function render(): JSX.Element {
   return (&lt;div&gt;&lt;/div&gt;);
}
</code></pre></div>
<p dir="auto">but that is rather cumbersome due to the tslint errors you will get.</p>
<p dir="auto">Therefore, maybe not optimize React require away in case of .tsx?</p>
<p dir="auto">When using <code class="notranslate">--jsx preserve</code>, the React declaration is removed if not directly used.  Issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="93474206" data-permission-text="Title is private" data-url="https://github.com/microsoft/TypeScript/issues/3764" data-hovercard-type="issue" data-hovercard-url="/microsoft/TypeScript/issues/3764/hovercard" href="https://github.com/microsoft/TypeScript/issues/3764">#3764</a> fixed this for <code class="notranslate">--jsx react</code> but not for the preserve case.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from &quot;react&quot;;
import * as ReactDOM from &quot;react-dom&quot;;

var targetEl = document.getElementById(&quot;app&quot;);
ReactDOM.render(
  &lt;div&gt;{&quot;Some Text&quot;}&lt;/div&gt;,
  targetEl)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-s1">targetEl</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">"app"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span>
  <span class="pl-kos">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span><span class="pl-kos">{</span><span class="pl-s">"Some Text"</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div&gt;,
  <span class="pl-s1">targetEl</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">This breaks the the app after ran through webpack -&gt; babel</p>
<p dir="auto">Currently, the workaround is to include a dummy reference to <code class="notranslate">React;</code>, but this shouldn't be necessary and the imports should pass through to babel.</p>