<p dir="auto">Just to play safe it is better to place <code class="notranslate">"use strict"</code> inside function to avoid concat issues in future.</p>
<p dir="auto">Original</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {a} from './a.js';"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">a</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./a.js'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Expected</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="define([&quot;exports&quot;, &quot;./a.js&quot;], function(exports, _a) {
  &quot;use strict&quot;;
  var a = _a.a;
});"><pre class="notranslate"><span class="pl-en">define</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">"exports"</span><span class="pl-kos">,</span> <span class="pl-s">"./a.js"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">_a</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s">"use strict"</span><span class="pl-kos">;</span>
  <span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-s1">_a</span><span class="pl-kos">.</span><span class="pl-c1">a</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">Actual</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

define([&quot;exports&quot;, &quot;./a.js&quot;], function(exports, _a) {
  var a = _a.a;
});"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-en">define</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">"exports"</span><span class="pl-kos">,</span> <span class="pl-s">"./a.js"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">exports</span><span class="pl-kos">,</span> <span class="pl-s1">_a</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-s1">_a</span><span class="pl-kos">.</span><span class="pl-c1">a</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">The same is for UMD.</p>
<p dir="auto">It is possible to fix it by placing <code class="notranslate">_moduleFormatter</code> transformer after <code class="notranslate">useString</code>. But I am not sure that it is a good way.</p>
<blockquote>
<p dir="auto">Issue originally reported by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/hzoo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/hzoo">@hzoo</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="195297865" data-permission-text="Title is private" data-url="https://github.com/babel/babel-preset-env/issues/91" data-hovercard-type="issue" data-hovercard-url="/babel/babel-preset-env/issues/91/hovercard" href="https://github.com/babel/babel-preset-env/issues/91">babel/babel-preset-env#91</a></p>
</blockquote>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;env&quot;, {
      &quot;targetPreset&quot;: &quot;experimental-stage-3&quot; // default to latest like it is currently,
      &quot;targets&quot;: {
        &quot;browsers&quot;: [&quot;last 2 versions&quot;]
      },
      &quot;exclude&quot;: [&quot;transform-regenerator&quot;],
    }
  ] 
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"env"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-s">"targetPreset"</span>: <span class="pl-s">"experimental-stage-3"</span> <span class="pl-c">// default to latest like it is currently,</span>
      <span class="pl-s">"targets"</span>: <span class="pl-kos">{</span>
        <span class="pl-s">"browsers"</span>: <span class="pl-kos">[</span><span class="pl-s">"last 2 versions"</span><span class="pl-kos">]</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-s">"exclude"</span>: <span class="pl-kos">[</span><span class="pl-s">"transform-regenerator"</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">TLDR - figure out how we should include stage-3 plugins.</p>
<hr>
<p dir="auto">Oh man naming is hard: basically there's a difference between the "target javascript" you want to write in. What is currently "targets" is the list of environments you support (why didn't I just call it "environments" when the preset is preset-env lol <g-emoji class="g-emoji" alias="thinking" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f914.png">🤔</g-emoji> ).</p>
<p dir="auto">The values of this option could potentially be any year, latest, or stage 3 (basically the current official presets that we have). In reality I think the only ones we care about would be <code class="notranslate">latest</code> and <code class="notranslate">stage 3</code>. The reason why <a href="https://github.com/babel/babel-preset-env#support-all-plugins-in-babel-that-are-considered-latest">we didn't add stage-3 earlier</a> was because I kept thinking about the latest spec rather than forgetting that at stage-3 browser vendors will start implementations. Many projects/companies choose to target stage-3 (and if you are doing lower without codemods or serious consideration of the consequences then there will be issues and that's why we have been discussing <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="192477049" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/4914" data-hovercard-type="issue" data-hovercard-url="/babel/babel/issues/4914/hovercard" href="https://github.com/babel/babel/issues/4914">#4914</a> and others).</p>