Issue 1:
Bug Report

I would like to work on a fix!

Current behavior

A clear and concise description of the behavior.

REPL

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: .babelrc

{
plugins: [
["@babel/proposal-class-properties"],
["@babel/transform-classes"],
["@babel/plugin-syntax-jsx"]
]
}

Input Code

class Hello extends Component {
world = () => <this.World p={this.v} />
}

Output Code

//...
var Hello = /*#__PURE__*/function (_Component) {
"use strict";

_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 < _len; _key++) {
args[_key] = arguments[_key];
}

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

_defineProperty(_assertThisInitialized(_this), "world", function () {
return <_this2.World p={_this.v} />;
});

return _this;
}

return Hello;
}(Component);
//...

Expected behavior

A clear and concise description of what you expected to happen (or code).

//...
var Hello = /*#__PURE__*/function (_Component) {
"use strict";

_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 < _len; _key++) {
args[_key] = arguments[_key];
}

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

_defineProperty(_assertThisInitialized(_this), "world", function () {
return <_this.World p={_this.v} />;
});

return _this;
}

return Hello;
}(Component);
//...

Environment

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 => 7.11.1
@babel/plugin-proposal-class-properties: 7.10.4 => 7.10.4
@babel/plugin-syntax-jsx: 7.10.4 => 7.10.4
@babel/plugin-transform-classes: 7.10.4 => 7.10.4

Possible Solution

This patch won't be correct, but work for the snippet above:

--- 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 = "JSXIdentifier";
+ thisPath.replaceWith(thisRef());
+ }
+ }
+
const bareSupers = new Set();
path.traverse(
traverse.visitors.merge([

Additional context

Add any other context about the problem here. Or a screenshot if applicable

Issue 2:
Bug Report

I (and others) get an error when running the build of a create-react-app project ("Minified React error #130 - 'this' in JSX arrow function", see facebook/create-react-app#8738

Note: I had hoped to find a existing bug, so I posted the problem as a discussion first

Current behavior

With the following code

class ComponentWithJsx extends React.Component {
First = () => <this.Second />; // <- problem

Second = () => <div>SUCCESS (ComponentWithJsx)</div>;

render() {
return <this.First />;
}
}

I get this error:

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.

in Unknown (created by ComponentWithJsx)

in ComponentWithJsx

I built a minimal, reproducible example by ejecting create-react-app and reducing it to the minimal code which triggers the behavior: https://github.com/sbusch/create-react-app-8738-repro

Based on this, @JLHwung created an REPL (thank you!)

More info in the README.md in the repro and in my comment to the original issue here: facebook/create-react-app#8738 (comment)

The problem is ultimately caused by the Babel plugin @babel/plugin-transform-classes, but it's only happening in conjunction with @babel/plugin-transform-react-jsx and @babel/plugin-proposal-class-properties.

Tested with newest versions of @babel/core and mentioned packages (see package.json in the repro)

Note: I can work around the problem by disabling @babel/plugin-transform-classes or by settting the @babel/plugin-transform-classes option { loose: true} (or - in a create-react-app project - by limiting the browserslist for @babel/preset-env to browsers which don't need the @babel/plugin-transform-classes transform. For the default browserslist, this can be achieved by adding not ie 11)

Input Code

From @JLHwung REPL:

import React from 'react';

class App extends React.Component {

br = "br";

render = () => {

return (
<this.br />
);
};
}

export default App;

Expected behavior

No runtime errors should occur. Currently, the value for this is somehow lost.

When building and serving the repro, I expect rendering of

SUCCESS (ComponentWithoutJsx) and

SUCCESS (ComponentWithJsx)

(as outline in thw README.md there)

Babel Configuration

Excerpt from webpack.config.js (full file here: https://github.com/sbusch/create-react-app-8738-repro/blob/master/webpack.config.js):

{
test: /\.(js|jsx)$/,
include: srcPath,
loader: require.resolve("babel-loader"),
options: {
plugins: [
//*
[
"@babel/plugin-transform-react-jsx",
{
// Rule out that PURE markers are the culprit
pure: false,
},
],
//*/
//*
[
"@babel/plugin-proposal-class-properties",
{
// Enable loose mode to use assignment instead of defineProperty
// See discussion in https://github.com/facebook/create-react-app/issues/4263
loose: true,
},
],
//*/
//*
[
"@babel/plugin-transform-classes",
{
loose: false,
},
],
//*/
],
},
}

Environment

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 => 7.10.4
@babel/plugin-proposal-class-properties: ^7.10.4 => 7.10.4
@babel/plugin-transform-classes: 7.10.4 => 7.10.4
@babel/plugin-transform-react-jsx: 7.10.4 => 7.10.4
babel-loader: 8.1.0 => 8.1.0
webpack: 4.43.0 => 4.43.0

Monorepo: no

How you are using Babel: loader

Thanks to all contributors for creating Babel!