<blockquote>
<p dir="auto">Issue originally reported by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/marcoacierno/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/marcoacierno">@marcoacierno</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="258246083" data-permission-text="Title is private" data-url="https://github.com/babel/babel-preset-env/issues/417" data-hovercard-type="issue" data-hovercard-url="/babel/babel-preset-env/issues/417/hovercard" href="https://github.com/babel/babel-preset-env/issues/417">babel/babel-preset-env#417</a></p>
</blockquote>
<p dir="auto">I'm having difficulties using the plugin transform-class-properties together with babel-preset-env, even if it's defined in the <code class="notranslate">.babelrc</code> the build still says 'Missing class properties transform.'. Searching online I found that you need to use transform-class-properties before the others (or after, can't recall now) but as far as I know I can't change the execution order in the babelrc.</p>
<p dir="auto">How can I solve this problem?</p>
<p dir="auto">The error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: /Users/marco/projects/TAOPP/Frontend/js/App.js: Missing class properties transform.
  32 |
  33 | class App extends React.Component {
&gt; 34 |     static childContextTypes = {
     |     ^"><pre class="notranslate"><code class="notranslate">SyntaxError: /Users/marco/projects/TAOPP/Frontend/js/App.js: Missing class properties transform.
  32 |
  33 | class App extends React.Component {
&gt; 34 |     static childContextTypes = {
     |     ^
</code></pre></div>
<p dir="auto">My .babelrc</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    'presets': [
        ['env', {
            'targets': {
                'browsers': ['last 2 versions'],
            },
            'modules': false,
            'debug': true,
        }],
        'react',
    ],
    'plugins': [
        'transform-class-properties',
        'transform-object-rest-spread',
    ],
    'env': {
        'server': {
            'presets': [
                ['env', {
                    'modules': 'commonjs',
                }],
            ]
        },
        'production': {
            'presets': ['minify'],
        },
    },
}"><pre class="notranslate"><code class="notranslate">{
    'presets': [
        ['env', {
            'targets': {
                'browsers': ['last 2 versions'],
            },
            'modules': false,
            'debug': true,
        }],
        'react',
    ],
    'plugins': [
        'transform-class-properties',
        'transform-object-rest-spread',
    ],
    'env': {
        'server': {
            'presets': [
                ['env', {
                    'modules': 'commonjs',
                }],
            ]
        },
        'production': {
            'presets': ['minify'],
        },
    },
}
</code></pre></div>
<p dir="auto">(p.s. the documentation is not really clear about how <code class="notranslate">.babelrc</code> handles the env merge, so I'm not sure that my babelrc is correct)</p>
<p dir="auto">The code as follow running normally at last version(V7.8.6), but at Version7.8.7，throw error.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let obj = {one:{a:1}, other: {b:2}}
function fn(obj, key) {
  for(var key in obj) {
    fn(obj[key], key)
  }
}
fn(obj, 'base');"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">one</span>:<span class="pl-kos">{</span><span class="pl-c1">a</span>:<span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">other</span>: <span class="pl-kos">{</span><span class="pl-c1">b</span>:<span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">key</span> <span class="pl-k">in</span> <span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s">'base'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">throw error:</p>
<p dir="auto">TypeError:  Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null.</p>
<p dir="auto">my enviorment: <code class="notranslate">@babel/core:7.8.7, @babel/types:7.8.7,@babel/generator:7.8.7</code>.</p>
<p dir="auto">Now, I fix it as:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let obj = {base:{a:1}, other: {b:2}}
function fn(obj, key) {
  for(let key in obj) {
    fn(obj[key], key)
  }
}
fn(obj, 'base');"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">base</span>:<span class="pl-kos">{</span><span class="pl-c1">a</span>:<span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">other</span>: <span class="pl-kos">{</span><span class="pl-c1">b</span>:<span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">key</span> <span class="pl-k">in</span> <span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s">'base'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">or like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let obj = {base:{a:1}, other: {b:2}}
function fn(obj, key) {
  for(var key2 in obj) {
    fn(obj[key2], key2)
  }
}
fn(obj, 'base');"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">obj</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">base</span>:<span class="pl-kos">{</span><span class="pl-c1">a</span>:<span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">other</span>: <span class="pl-kos">{</span><span class="pl-c1">b</span>:<span class="pl-c1">2</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">for</span><span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">key2</span> <span class="pl-k">in</span> <span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">[</span><span class="pl-s1">key2</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">key2</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-en">fn</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">,</span> <span class="pl-s">'base'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Is it a bug with V7.8.7 or just change rules?</p>