<p dir="auto">It worked on babel 6.<br>
It occurred in React Component on babel 7.</p>
<p dir="auto">Here is an example.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// browser error: Uncaught TypeError: Cannot read property 'bind' of undefined

export default class App extends React.Component {
  constructor(props: Props) {
    super(props);
    console.log(this); // App class Object
    console.log(this.onChange); // undefined (Property exists)
    this.onChange = this.onChange.bind(this);
  }

  onChange() {}
}"><pre class="notranslate"><span class="pl-c">// browser error: Uncaught TypeError: Cannot read property 'bind' of undefined</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">App</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-v">Props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</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-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// App class Object</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">onChange</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// undefined (Property exists)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">onChange</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">onChange</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">onChange</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>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong></p>
<p dir="auto"><code class="notranslate">@babel/plugin-proposal-class-properties</code> transform flow type annotation to a property assigning undefined.</p>
<p dir="auto">this may caught statement order unexpected error.</p>
<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="let code = `
class B {}
class Logger extends B {
  log: {
    error: boolean
  }
  silent: boolean
  log = {
    error: true
  }
  get silent(): boolean {
    return this._silent;
  }
  set silent(val: boolean) {
    this._silent = !!val;
    if (!this.log) {
      throw new Error('#log should not be nil.')
    }
    Object.keys(this.log).forEach(k =&gt; { /* do something... */  })
  }
  constructor() {
    super()
  }
}
`

let r = require(&quot;@babel/core&quot;).transform(code, {
  &quot;presets&quot;: [ &quot;@babel/preset-flow&quot; ],
  &quot;plugins&quot;: [
    [ &quot;@babel/plugin-proposal-class-properties&quot;, { &quot;loose&quot;: true } ]
  ]
})
console.log(r.code)"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">code</span> <span class="pl-c1">=</span> <span class="pl-s">`</span>
<span class="pl-s">class B {}</span>
<span class="pl-s">class Logger extends B {</span>
<span class="pl-s">  log: {</span>
<span class="pl-s">    error: boolean</span>
<span class="pl-s">  }</span>
<span class="pl-s">  silent: boolean</span>
<span class="pl-s">  log = {</span>
<span class="pl-s">    error: true</span>
<span class="pl-s">  }</span>
<span class="pl-s">  get silent(): boolean {</span>
<span class="pl-s">    return this._silent;</span>
<span class="pl-s">  }</span>
<span class="pl-s">  set silent(val: boolean) {</span>
<span class="pl-s">    this._silent = !!val;</span>
<span class="pl-s">    if (!this.log) {</span>
<span class="pl-s">      throw new Error('#log should not be nil.')</span>
<span class="pl-s">    }</span>
<span class="pl-s">    Object.keys(this.log).forEach(k =&gt; { /* do something... */  })</span>
<span class="pl-s">  }</span>
<span class="pl-s">  constructor() {</span>
<span class="pl-s">    super()</span>
<span class="pl-s">  }</span>
<span class="pl-s">}</span>
<span class="pl-s">`</span>

<span class="pl-k">let</span> <span class="pl-s1">r</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@babel/core"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">transform</span><span class="pl-kos">(</span><span class="pl-s1">code</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span> <span class="pl-s">"@babel/preset-flow"</span> <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-s">"plugins"</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span> <span class="pl-s">"@babel/plugin-proposal-class-properties"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-s">"loose"</span>: <span class="pl-c1">true</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">r</span><span class="pl-kos">.</span><span class="pl-c1">code</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">ouput =&gt;</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class B {}

class Logger extends B {
  get silent() {
    return this._silent;
  }

  set silent(val) {
    this._silent = !!val;

    if (!this.log) {
      throw new Error('#log should not be nil.')   // &lt;----- will throw if the annotation property assigning undefined
    }

    Object.keys(this.log).forEach(k =&gt; { /* do something... */ });
    });
  }

  constructor() {
    super();
    this.log = void 0;  &lt;&lt;&lt;&lt;&lt;----
    this.silent = void 0; &lt;&lt;&lt;&lt;&lt;---- with setter defined.
    this.log = {
      error: true
    };
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">B</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Logger</span> <span class="pl-k">extends</span> <span class="pl-v">B</span> <span class="pl-kos">{</span>
  <span class="pl-k">get</span> <span class="pl-en">silent</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_silent</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">set</span> <span class="pl-en">silent</span><span class="pl-kos">(</span><span class="pl-s1">val</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_silent</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">val</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'#log should not be nil.'</span><span class="pl-kos">)</span>   <span class="pl-c">// &lt;----- will throw if the annotation property assigning undefined</span>
    <span class="pl-kos">}</span>

    <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">k</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> <span class="pl-c">/* do something... */</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-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span> <span class="pl-c1">=</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">;</span>  <span class="pl-c1">&lt;</span><span class="pl-c1">&lt;&lt;</span><span class="pl-c1">&lt;&lt;</span><span class="pl-c1">--</span><span class="pl-c1">--</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">silent</span> <span class="pl-c1">=</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-c1">&lt;</span><span class="pl-c1">&lt;&lt;</span><span class="pl-c1">&lt;&lt;</span><span class="pl-c1">--</span><span class="pl-c1">--</span> <span class="pl-s1">with</span> <span class="pl-s1">setter</span> <span class="pl-s1">defined</span><span class="pl-kos">.</span>
    <span class="pl-c1">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c1">error</span>: <span class="pl-c1">true</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>Expected behavior/code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class B {}

class Logger extends B {
  get silent() {
    return this._silent;
  }

  set silent(val) {
    this._silent = !!val;

    if (!this.log) {
      throw new Error('#log should not be nil.')
    }

    Object.keys(this.log).forEach(k =&gt; { /* do something... */ });
  }

  constructor() {
    super();
    this.log = {
      error: true
    };
  }

}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">B</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Logger</span> <span class="pl-k">extends</span> <span class="pl-v">B</span> <span class="pl-kos">{</span>
  <span class="pl-k">get</span> <span class="pl-en">silent</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-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_silent</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">set</span> <span class="pl-en">silent</span><span class="pl-kos">(</span><span class="pl-s1">val</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_silent</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">val</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'#log should not be nil.'</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>

    <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-s1">k</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span> <span class="pl-c">/* do something... */</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">log</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
      <span class="pl-c1">error</span>: <span class="pl-c1">true</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>
<ul dir="auto">
<li>Babel version(s): [e.g. v6.0.0, v7.0.0-beta.55]</li>
<li>Node/npm version: [e.g. Node 8/npm 5]</li>
<li>OS: [e.g. OSX 10.13.4]</li>
<li>Monorepo [e.g. yes/no/Lerna]</li>
<li>How you are using Babel: <code class="notranslate">js</code></li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">Should strip the <code class="notranslate">ClassProperty</code> type of <code class="notranslate">TypeAnnotation</code>.</p>