<h2 dir="auto">Bug Report</h2>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I would like to work on a fix!</li>
</ul>

<p dir="auto"><strong>Current behavior</strong><br>
A clear and concise description of the behavior.</p>
<ul dir="auto">
<li><a href="https://babeljs.io/repl#?browsers=&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=MYGwhgzhAEASCmIQHtrwB4Bd4DsAmMAwsgLYAOyOum0A3gFDTQDuyATiHtALzQAUASh4A-aAB5MACwCWEAHQB1dp2hlutKbLkA3AL7QA9MPq6gA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=false&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=unambiguous&amp;lineWrap=false&amp;presets=env&amp;prettier=false&amp;targets=&amp;version=7.11.1&amp;externalPlugins=%40babel%2Fplugin-proposal-class-properties%407.10.4%2C%40babel%2Fplugin-syntax-jsx%407.10.4%2C%40babel%2Fplugin-transform-classes%407.10.4" rel="nofollow">REPL</a></li>
</ul>
<p dir="auto"><strong>Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)</strong></p>
<ul dir="auto">
<li>Filename: <code class="notranslate">.babelrc</code></li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  plugins: [
    [&quot;@babel/proposal-class-properties&quot;],
    [&quot;@babel/transform-classes&quot;],
    [&quot;@babel/plugin-syntax-jsx&quot;]
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span><span class="pl-s">"@babel/proposal-class-properties"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s">"@babel/transform-classes"</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s">"@babel/plugin-syntax-jsx"</span><span class="pl-kos">]</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<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="class Hello extends Component {
  world = () =&gt; &lt;this.World p={this.v} /&gt;
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Hello</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">world</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-s1">this</span><span class="pl-kos">.</span><span class="pl-v">World</span> <span class="pl-c1">p</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">v</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Output Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//...
var Hello = /*#__PURE__*/function (_Component) {
  &quot;use strict&quot;;

  _inherits(Hello, _Component);

  var _super = _createSuper(Hello);

  function Hello() {
    var _this2 = this;

    var _this;

    _classCallCheck(this, Hello);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key &lt; _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), &quot;world&quot;, function () {
      return &lt;_this2.World p={_this.v} /&gt;;
    });

    return _this;
  }

  return Hello;
}(Component);
//..."><pre class="notranslate"><span class="pl-c">//...</span>
<span class="pl-k">var</span> <span class="pl-v">Hello</span> <span class="pl-c1">=</span> <span class="pl-c">/*#__PURE__*/</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_Component</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-en">_inherits</span><span class="pl-kos">(</span><span class="pl-v">Hello</span><span class="pl-kos">,</span> <span class="pl-s1">_Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">var</span> <span class="pl-s1">_super</span> <span class="pl-c1">=</span> <span class="pl-en">_createSuper</span><span class="pl-kos">(</span><span class="pl-v">Hello</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">function</span> <span class="pl-v">Hello</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">_this2</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">;</span>

    <span class="pl-k">var</span> <span class="pl-s1">_this</span><span class="pl-kos">;</span>

    <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-v">Hello</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">_len</span> <span class="pl-c1">=</span> <span class="pl-smi">arguments</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">,</span> <span class="pl-s1">args</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Array</span><span class="pl-kos">(</span><span class="pl-s1">_len</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">_key</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">_key</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">_len</span><span class="pl-kos">;</span> <span class="pl-s1">_key</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">args</span><span class="pl-kos">[</span><span class="pl-s1">_key</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-smi">arguments</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-s1">_this</span> <span class="pl-c1">=</span> <span class="pl-s1">_super</span><span class="pl-kos">.</span><span class="pl-c1">call</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-s1">_super</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-kos">.</span><span class="pl-en">concat</span><span class="pl-kos">(</span><span class="pl-s1">args</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">_defineProperty</span><span class="pl-kos">(</span><span class="pl-en">_assertThisInitialized</span><span class="pl-kos">(</span><span class="pl-s1">_this</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"world"</span><span class="pl-kos">,</span> <span class="pl-k">function</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-c1">&lt;</span><span class="pl-s1">_this2</span><span class="pl-kos">.</span><span class="pl-v">World</span> <span class="pl-c1">p</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">_this</span><span class="pl-kos">.</span><span class="pl-c1">v</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</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-s1">_this</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-v">Hello</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">//...</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
A clear and concise description of what you expected to happen (or code).</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//...
var Hello = /*#__PURE__*/function (_Component) {
  &quot;use strict&quot;;

  _inherits(Hello, _Component);

  var _super = _createSuper(Hello);

  function Hello() {
    var _this;

    _classCallCheck(this, Hello);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key &lt; _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), &quot;world&quot;, function () {
      return &lt;_this.World p={_this.v} /&gt;;
    });

    return _this;
  }

  return Hello;
}(Component);
//..."><pre class="notranslate"><span class="pl-c">//...</span>
<span class="pl-k">var</span> <span class="pl-v">Hello</span> <span class="pl-c1">=</span> <span class="pl-c">/*#__PURE__*/</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_Component</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-en">_inherits</span><span class="pl-kos">(</span><span class="pl-v">Hello</span><span class="pl-kos">,</span> <span class="pl-s1">_Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">var</span> <span class="pl-s1">_super</span> <span class="pl-c1">=</span> <span class="pl-en">_createSuper</span><span class="pl-kos">(</span><span class="pl-v">Hello</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">function</span> <span class="pl-v">Hello</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">_this</span><span class="pl-kos">;</span>

    <span class="pl-en">_classCallCheck</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-v">Hello</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">_len</span> <span class="pl-c1">=</span> <span class="pl-smi">arguments</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">,</span> <span class="pl-s1">args</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Array</span><span class="pl-kos">(</span><span class="pl-s1">_len</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">_key</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">_key</span> <span class="pl-c1">&lt;</span> <span class="pl-s1">_len</span><span class="pl-kos">;</span> <span class="pl-s1">_key</span><span class="pl-c1">++</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">args</span><span class="pl-kos">[</span><span class="pl-s1">_key</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-smi">arguments</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-s1">_this</span> <span class="pl-c1">=</span> <span class="pl-s1">_super</span><span class="pl-kos">.</span><span class="pl-c1">call</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-s1">_super</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-kos">.</span><span class="pl-en">concat</span><span class="pl-kos">(</span><span class="pl-s1">args</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">_defineProperty</span><span class="pl-kos">(</span><span class="pl-en">_assertThisInitialized</span><span class="pl-kos">(</span><span class="pl-s1">_this</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"world"</span><span class="pl-kos">,</span> <span class="pl-k">function</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-c1">&lt;</span><span class="pl-s1">_this</span><span class="pl-kos">.</span><span class="pl-v">World</span> <span class="pl-c1">p</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">_this</span><span class="pl-kos">.</span><span class="pl-c1">v</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</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-s1">_this</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-v">Hello</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">//...</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  System:
    OS: macOS 11.0
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  npmPackages:
    @babel/core: 7.11.1 =&gt; 7.11.1
    @babel/plugin-proposal-class-properties: 7.10.4 =&gt; 7.10.4
    @babel/plugin-syntax-jsx: 7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-classes: 7.10.4 =&gt; 7.10.4"><pre class="notranslate"><code class="notranslate">  System:
    OS: macOS 11.0
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  npmPackages:
    @babel/core: 7.11.1 =&gt; 7.11.1
    @babel/plugin-proposal-class-properties: 7.10.4 =&gt; 7.10.4
    @babel/plugin-syntax-jsx: 7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-classes: 7.10.4 =&gt; 7.10.4
</code></pre></div>
<p dir="auto"><strong>Possible Solution</strong></p>

<p dir="auto">This patch won't be correct, but work for the snippet above:</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="--- transformClass.js	2020-08-11 21:49:04.000000000 +0800
+++ transformClass.patch.js	2020-08-11 21:55:10.000000000 +0800
@@ -54,6 +54,7 @@
     staticPropBody: [],
     body: [],
     superThises: [],
+    jsxSuperThises: [],
     pushedConstructor: false,
     pushedInherits: false,
     protoAlias: null,
@@ -75,6 +76,9 @@
       ThisExpression(path) {
         classState.superThises.push(path);
       },
+      JSXIdentifier(path) {
+        if (path.node.name === 'this') classState.jsxSuperThises.push(path);
+      },
     },
   ]);
 
@@ -339,6 +343,15 @@
       );
     }
 
+    for (const thisPath of classState.jsxSuperThises) {
+      const { node, parentPath } = thisPath;
+      if (parentPath.isJSXMemberExpression({ object: node })) {
+        const ref = thisRef();
+        ref.type = &quot;JSXIdentifier&quot;;
+        thisPath.replaceWith(thisRef());
+      }
+    }
+
     const bareSupers = new Set();
     path.traverse(
       traverse.visitors.merge(["><pre class="notranslate"><span class="pl-md">--- transformClass.js	2020-08-11 21:49:04.000000000 +0800</span>
<span class="pl-mi1">+++ transformClass.patch.js	2020-08-11 21:55:10.000000000 +0800</span>
<span class="pl-mdr">@@ -54,6 +54,7 @@</span>
     staticPropBody: [],
     body: [],
     superThises: [],
<span class="pl-mi1"><span class="pl-mi1">+</span>    jsxSuperThises: [],</span>
     pushedConstructor: false,
     pushedInherits: false,
     protoAlias: null,
<span class="pl-mdr">@@ -75,6 +76,9 @@</span>
       ThisExpression(path) {
         classState.superThises.push(path);
       },
<span class="pl-mi1"><span class="pl-mi1">+</span>      JSXIdentifier(path) {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>        if (path.node.name === 'this') classState.jsxSuperThises.push(path);</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>      },</span>
     },
   ]);
 
<span class="pl-mdr">@@ -339,6 +343,15 @@</span>
       );
     }
 
<span class="pl-mi1"><span class="pl-mi1">+</span>    for (const thisPath of classState.jsxSuperThises) {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>      const { node, parentPath } = thisPath;</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>      if (parentPath.isJSXMemberExpression({ object: node })) {</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>        const ref = thisRef();</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>        ref.type = "JSXIdentifier";</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>        thisPath.replaceWith(thisRef());</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>      }</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>    }</span>
<span class="pl-mi1"><span class="pl-mi1">+</span></span>
     const bareSupers = new Set();
     path.traverse(
       traverse.visitors.merge([</pre></div>
<p dir="auto"><strong>Additional context</strong><br>
Add any other context about the problem here. Or a screenshot if applicable</p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto">I (and others) get an error when running the build of a create-react-app project ("Minified React error <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="48196010" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/130" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/130/hovercard" href="https://github.com/babel/babel/pull/130">#130</a> - 'this' in JSX arrow function", see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="589365999" data-permission-text="Title is private" data-url="https://github.com/facebook/create-react-app/issues/8738" data-hovercard-type="issue" data-hovercard-url="/facebook/create-react-app/issues/8738/hovercard" href="https://github.com/facebook/create-react-app/issues/8738">facebook/create-react-app#8738</a></p>
<p dir="auto"><em>Note: I had hoped to find a existing bug, so I <a href="https://github.com/babel/babel/discussions/11785" data-hovercard-type="discussion" data-hovercard-url="/babel/babel/discussions/11785/hovercard">posted the problem as a discussion</a> first</em></p>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">With the following code</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class ComponentWithJsx extends React.Component {
   First = () =&gt; &lt;this.Second /&gt;; // &lt;- problem

   Second = () =&gt; &lt;div&gt;SUCCESS (ComponentWithJsx)&lt;/div&gt;;

   render() {
     return &lt;this.First /&gt;;
   }
 }"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">ComponentWithJsx</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-c1">First</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-s1">this</span><span class="pl-kos">.</span><span class="pl-v">Second</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span> <span class="pl-c">// &lt;- problem</span>

   <span class="pl-c1">Second</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>SUCCESS (ComponentWithJsx)<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>

   <span class="pl-en">render</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-c1">&lt;</span><span class="pl-s1">this</span><span class="pl-kos">.</span><span class="pl-v">First</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
   <span class="pl-kos">}</span>
 <span class="pl-kos">}</span></pre></div>
<p dir="auto">I get this error:</p>
<blockquote>
<p dir="auto">Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.<br>
in Unknown (created by ComponentWithJsx)<br>
in ComponentWithJsx</p>
</blockquote>
<p dir="auto">I built a minimal, reproducible example by ejecting create-react-app and reducing it to the minimal code which triggers the behavior: <a href="https://github.com/sbusch/create-react-app-8738-repro">https://github.com/sbusch/create-react-app-8738-repro</a></p>
<p dir="auto">Based on this, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/JLHwung/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/JLHwung">@JLHwung</a> created an <a href="https://babeljs.io/en/repl#?browsers=defaults&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoctAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHr3gBvSnDgAjKHAC8cAEQrNFcoqL8kqjQAoAlOoB8cefsVwiMAK5QecU_YdwAPDAAWwHQiKnAA9FZecOYUigC-FHGUnJCwcHxImCjO1PAsYKRAA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=true&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=false&amp;presets=env%2Creact%2Cenv&amp;prettier=false&amp;targets=&amp;version=7.10.4&amp;externalPlugins=" rel="nofollow">REPL</a> (thank you!)</p>
<p dir="auto">More info in the <code class="notranslate">README.md</code> in the <a href="https://github.com/sbusch/create-react-app-8738-repro">repro</a> and in my comment to the original issue here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="589365999" data-permission-text="Title is private" data-url="https://github.com/facebook/create-react-app/issues/8738" data-hovercard-type="issue" data-hovercard-url="/facebook/create-react-app/issues/8738/hovercard?comment_id=646198606&amp;comment_type=issue_comment" href="https://github.com/facebook/create-react-app/issues/8738#issuecomment-646198606">facebook/create-react-app#8738 (comment)</a></p>
<p dir="auto">The problem is ultimately caused by the Babel plugin <code class="notranslate">@babel/plugin-transform-classes</code>, but it's only happening in conjunction with <code class="notranslate">@babel/plugin-transform-react-jsx</code> and <code class="notranslate">@babel/plugin-proposal-class-properties</code>.</p>
<p dir="auto">Tested with newest versions of <code class="notranslate">@babel/core</code> and mentioned packages (see <a href="https://github.com/sbusch/create-react-app-8738-repro/blob/master/package.json"><code class="notranslate">package.json</code> in the repro</a>)</p>
<p dir="auto"><em>Note: I can work around the problem by disabling <code class="notranslate">@babel/plugin-transform-classes</code> or by settting the <code class="notranslate">@babel/plugin-transform-classes</code> option <code class="notranslate">{ loose: true}</code> (or - in a create-react-app project - by limiting the <code class="notranslate">browserslist</code> for <code class="notranslate">@babel/preset-env</code> to browsers which don't need the <code class="notranslate">@babel/plugin-transform-classes</code> transform. For the default <code class="notranslate">browserslist</code>, this can be achieved by adding <code class="notranslate">not ie 11</code>)</em></p>
<p dir="auto"><strong>Input Code</strong></p>
<p dir="auto">From <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/JLHwung/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/JLHwung">@JLHwung</a> <a href="https://babeljs.io/en/repl#?browsers=defaults&amp;build=&amp;builtIns=false&amp;spec=false&amp;loose=false&amp;code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoctAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHr3gBvSnDgAjKHAC8cAEQrNFcoqL8kqjQAoAlOoB8cefsVwiMAK5QecU_YdwAPDAAWwHQiKnAA9FZecOYUigC-FHGUnJCwcHxImCjO1PAsYKRAA&amp;debug=false&amp;forceAllTransforms=false&amp;shippedProposals=true&amp;circleciRepo=&amp;evaluate=false&amp;fileSize=false&amp;timeTravel=false&amp;sourceType=module&amp;lineWrap=false&amp;presets=env%2Creact%2Cenv&amp;prettier=false&amp;targets=&amp;version=7.10.4&amp;externalPlugins=" rel="nofollow">REPL</a>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';

class App extends React.Component {

  br = &quot;br&quot;;

  render = () =&gt; {

    return (
      &lt;this.br /&gt;
    );
  };
}

export default App;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</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-c1">br</span> <span class="pl-c1">=</span> <span class="pl-s">"br"</span><span class="pl-kos">;</span>

  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-s1">this</span><span class="pl-kos">.</span><span class="pl-s1">br</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</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-k">export</span> <span class="pl-k">default</span> <span class="pl-v">App</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">No runtime errors should occur. Currently, the value for <code class="notranslate">this</code> is somehow lost.</p>
<p dir="auto">When building and serving the <a href="https://github.com/sbusch/create-react-app-8738-repro">repro</a>, I expect rendering of</p>
<blockquote>
<p dir="auto">SUCCESS (ComponentWithoutJsx) and<br>
SUCCESS (ComponentWithJsx)</p>
</blockquote>
<p dir="auto">(as outline in thw README.md there)</p>
<p dir="auto"><strong>Babel Configuration</strong></p>
<p dir="auto">Excerpt from <code class="notranslate">webpack.config.js</code> (full file here: <a href="https://github.com/sbusch/create-react-app-8738-repro/blob/master/webpack.config.js">https://github.com/sbusch/create-react-app-8738-repro/blob/master/webpack.config.js</a>):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: require.resolve(&quot;babel-loader&quot;),
        options: {
          plugins: [
            //*
            [
              &quot;@babel/plugin-transform-react-jsx&quot;,
              {
                // Rule out that PURE markers are the culprit
                pure: false,
              },
            ],
            //*/
            //*
            [
              &quot;@babel/plugin-proposal-class-properties&quot;,
              {
                // Enable loose mode to use assignment instead of defineProperty
                // See discussion in https://github.com/facebook/create-react-app/issues/4263
                loose: true,
              },
            ],
            //*/
            //*
            [
              &quot;@babel/plugin-transform-classes&quot;,
              {
                loose: false,
              },
            ],
            //*/
          ],
        },
      }"><pre class="notranslate"><span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>js<span class="pl-c1">|</span>jsx<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-s1">srcPath</span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">"babel-loader"</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
            <span class="pl-c">//*</span>
            <span class="pl-kos">[</span>
              <span class="pl-s">"@babel/plugin-transform-react-jsx"</span><span class="pl-kos">,</span>
              <span class="pl-kos">{</span>
                <span class="pl-c">// Rule out that PURE markers are the culprit</span>
                <span class="pl-c1">pure</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-c">//*/</span>
            <span class="pl-c">//*</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-c">// Enable loose mode to use assignment instead of defineProperty</span>
                <span class="pl-c">// See discussion in https://github.com/facebook/create-react-app/issues/4263</span>
                <span class="pl-c1">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-c">//*/</span>
            <span class="pl-c">//*</span>
            <span class="pl-kos">[</span>
              <span class="pl-s">"@babel/plugin-transform-classes"</span><span class="pl-kos">,</span>
              <span class="pl-kos">{</span>
                <span class="pl-c1">loose</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-c">//*/</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"><strong>Environment</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  npmPackages:
    @babel/core: 7.10.4 =&gt; 7.10.4
    @babel/plugin-proposal-class-properties: ^7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-classes: 7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-react-jsx: 7.10.4 =&gt; 7.10.4
    babel-loader: 8.1.0 =&gt; 8.1.0
    webpack: 4.43.0 =&gt; 4.43.0"><pre class="notranslate"><code class="notranslate">  System:
    OS: macOS 10.15.5
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  npmPackages:
    @babel/core: 7.10.4 =&gt; 7.10.4
    @babel/plugin-proposal-class-properties: ^7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-classes: 7.10.4 =&gt; 7.10.4
    @babel/plugin-transform-react-jsx: 7.10.4 =&gt; 7.10.4
    babel-loader: 8.1.0 =&gt; 8.1.0
    webpack: 4.43.0 =&gt; 4.43.0
</code></pre></div>
<ul dir="auto">
<li>Monorepo: no</li>
<li>How you are using Babel: <code class="notranslate">loader</code></li>
</ul>
<hr>
<p dir="auto">Thanks to all contributors for creating Babel!</p>