<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default class MyComponent {
    name = &quot;test&quot;
}"><pre class="notranslate"><code class="notranslate">export default class MyComponent {
    name = "test"
}
</code></pre></div>
<p dir="auto">works</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default class MyComponent extends React.Component {
    name = &quot;test&quot;
}"><pre class="notranslate"><code class="notranslate">export default class MyComponent extends React.Component {
    name = "test"
}
</code></pre></div>
<p dir="auto">does not work<br>
<code class="notranslate">'super.*' is not allowed before super()</code></p>
<p dir="auto">v6.1.2, .babelrc:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    &quot;presets&quot;: [&quot;es2015&quot;, &quot;stage-0&quot;, &quot;react&quot;]
}"><pre class="notranslate"><code class="notranslate">{
    "presets": ["es2015", "stage-0", "react"]
}
</code></pre></div>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong></p>
<p dir="auto">According to this article, <a href="https://babeljs.io/blog/2019/07/03/7.5.0#dynamic-import-9552-https-githubcom-babel-babel-pull-9552-and-10109-https-githubcom-babel-babel-pull-10109" rel="nofollow">https://babeljs.io/blog/2019/07/03/7.5.0#dynamic-import-9552-https-githubcom-babel-babel-pull-9552-and-10109-https-githubcom-babel-babel-pull-10109</a>,  dynamic import support should be automatic when using <code class="notranslate">preset-env</code>. I've found this to not be the case on multiple occasions.</p>
<p dir="auto">For example, when running Jest and our Babel config has <code class="notranslate">modules: commonjs</code> and targets to <code class="notranslate">node: current</code> (full config below), we receive the following error.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: @babel/plugin-proposal-dynamic-import depends on a modules
transform plugin. Supported plugins are:
 - @babel/plugin-transform-modules-commonjs ^7.4.0
 - @babel/plugin-transform-modules-amd ^7.4.0
 - @babel/plugin-transform-modules-systemjs ^7.4.0

If you are using Webpack or Rollup and thus don't want
Babel to transpile your imports and exports, you can use
the @babel/plugin-syntax-dynamic-import plugin and let your
bundler handle dynamic imports."><pre class="notranslate"><code class="notranslate">Error: @babel/plugin-proposal-dynamic-import depends on a modules
transform plugin. Supported plugins are:
 - @babel/plugin-transform-modules-commonjs ^7.4.0
 - @babel/plugin-transform-modules-amd ^7.4.0
 - @babel/plugin-transform-modules-systemjs ^7.4.0

If you are using Webpack or Rollup and thus don't want
Babel to transpile your imports and exports, you can use
the @babel/plugin-syntax-dynamic-import plugin and let your
bundler handle dynamic imports.
</code></pre></div>
<p dir="auto">I dug into the code and placed console logs within this file: <a href="https://github.com/babel/babel/blob/master/packages/babel-preset-env/src/index.js#L131">https://github.com/babel/babel/blob/master/packages/babel-preset-env/src/index.js#L131</a></p>
<p dir="auto">Here's the output of the modules/ESM detection.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.log('MODULES', { modules, plugin: _moduleTransformations.default[modules] });
// MODULES { modules: 'commonjs', plugin: 'transform-modules-commonjs' }

console.log('ESM', { shouldTransformESM, shouldTransformDynamicImport });
// ESM { shouldTransformESM: true, shouldTransformDynamicImport: true }"><pre class="notranslate"><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-s">'MODULES'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> modules<span class="pl-kos">,</span> <span class="pl-c1">plugin</span>: <span class="pl-s1">_moduleTransformations</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">[</span><span class="pl-s1">modules</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// MODULES { modules: 'commonjs', plugin: 'transform-modules-commonjs' }</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-s">'ESM'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> shouldTransformESM<span class="pl-kos">,</span> shouldTransformDynamicImport <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// ESM { shouldTransformESM: true, shouldTransformDynamicImport: true }</span></pre></div>
<p dir="auto">So far so good. I then added console logs to <code class="notranslate">getPlugin</code>, to verify which plugins are being added. The output.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="PLUGIN transform-modules-commonjs (ADDED)
PLUGIN proposal-dynamic-import (ADDED)
PLUGIN transform-dotall-regex
PLUGIN syntax-async-generators
PLUGIN syntax-object-rest-spread
PLUGIN proposal-unicode-property-regex
PLUGIN syntax-json-strings
PLUGIN syntax-optional-catch-binding
PLUGIN transform-named-capturing-groups-regex"><pre class="notranslate"><code class="notranslate">PLUGIN transform-modules-commonjs (ADDED)
PLUGIN proposal-dynamic-import (ADDED)
PLUGIN transform-dotall-regex
PLUGIN syntax-async-generators
PLUGIN syntax-object-rest-spread
PLUGIN proposal-unicode-property-regex
PLUGIN syntax-json-strings
PLUGIN syntax-optional-catch-binding
PLUGIN transform-named-capturing-groups-regex
</code></pre></div>
<p dir="auto">And the output of the <code class="notranslate">preset-env</code> debug.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@babel/preset-env: `DEBUG` option

Using targets:
{
  &quot;chrome&quot;: &quot;72&quot;,
  &quot;firefox&quot;: &quot;64&quot;
}

Using modules transform: commonjs

Using plugins:
  transform-dotall-regex { &quot;firefox&quot;:&quot;64&quot; }
  syntax-async-generators { &quot;chrome&quot;:&quot;72&quot;, &quot;firefox&quot;:&quot;64&quot; }
  syntax-object-rest-spread { &quot;chrome&quot;:&quot;72&quot;, &quot;firefox&quot;:&quot;64&quot; }
  proposal-unicode-property-regex { &quot;firefox&quot;:&quot;64&quot; }
  syntax-json-strings { &quot;chrome&quot;:&quot;72&quot;, &quot;firefox&quot;:&quot;64&quot; }
  syntax-optional-catch-binding { &quot;chrome&quot;:&quot;72&quot;, &quot;firefox&quot;:&quot;64&quot; }
  transform-named-capturing-groups-regex { &quot;firefox&quot;:&quot;64&quot; }"><pre class="notranslate"><code class="notranslate">@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "72",
  "firefox": "64"
}

Using modules transform: commonjs

Using plugins:
  transform-dotall-regex { "firefox":"64" }
  syntax-async-generators { "chrome":"72", "firefox":"64" }
  syntax-object-rest-spread { "chrome":"72", "firefox":"64" }
  proposal-unicode-property-regex { "firefox":"64" }
  syntax-json-strings { "chrome":"72", "firefox":"64" }
  syntax-optional-catch-binding { "chrome":"72", "firefox":"64" }
  transform-named-capturing-groups-regex { "firefox":"64" }
</code></pre></div>
<p dir="auto">Correct me if I'm wrong, but the 2 required plugins for dynamic imports have been added above, YET I am still seeing the error at the top of this post. I'm a bit lost on how to resolve this going forward.</p>
<p dir="auto"><strong>Expected behavior/code</strong></p>
<p dir="auto">Dynamic import works via <code class="notranslate">preset-env</code>.</p>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  ignore: [
    'coverage/',
    'node_modules/',
    'public/',
    'esm/',
    'lib/',
    'tmp/',
    'dist/',
    '*.d.ts',
    '__tests__',
    '__mocks__',
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-catch-binding',
  ],
  presets: [
    [
      '@babel/preset-env',
      {
        debug: true,
        loose: true,
        modules: 'commonjs',
        shippedProposals: true,
        targets: false,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};"><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">ignore</span>: <span class="pl-kos">[</span>
    <span class="pl-s">'coverage/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'node_modules/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'public/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'esm/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'lib/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'tmp/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'dist/'</span><span class="pl-kos">,</span>
    <span class="pl-s">'*.d.ts'</span><span class="pl-kos">,</span>
    <span class="pl-s">'__tests__'</span><span class="pl-kos">,</span>
    <span class="pl-s">'__mocks__'</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-s">'@babel/plugin-proposal-class-properties'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@babel/plugin-proposal-optional-catch-binding'</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">debug</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">loose</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">modules</span>: <span class="pl-s">'commonjs'</span><span class="pl-kos">,</span>
        <span class="pl-c1">shippedProposals</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">targets</span>: <span class="pl-c1">false</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-s">'@babel/preset-react'</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-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">We target the last 3 chrome and firefox versions using browserlist.</p>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.5.5</li>
<li>Node/npm version: 10.16.2</li>
<li>OS: OSX 10.14.16</li>
<li>Monorepo: Lerna + Yarn</li>
<li>How you are using Babel: cli</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">Explicitly adding the plugins to my config. Not sure if this will cause issues for other tools and ESM builds.</p>
<p dir="auto"><strong>Additional context/Screenshots</strong><br>
Add any other context about the problem here. If applicable, add screenshots to help explain.</p>