Abnormal behavior with arrow function class methods caused by RHL

[nakamorichi]

Problem: RHL causes Components with arrow function class methods to behave abnormally.

First, here's my .babelrc:

{
	"presets": ["stage-2", "react"],
	"env": {
		"development": {
			"plugins": ["react-hot-loader/babel"]
		}
	}
}

, and here's the code:

import React, { Component } from 'react';

export default class ExampleModal extends Component {
	show = () => {
		console.log('The function gets called as expected but setState gives warning about unmounted component');
		this.setState({ is_shown: true });
	}

	render() {
		return (
			<button onClick={this.show}>Press me</button>
		);
	}
}

I found two fixes: either remove "react-hot-loader/babel" from Babel plugins, or changing show from arrow class method to ordinary class method and adding manual binding of this:

	show() {
		console.log('The function is executed without issues');
		this.setState({ is_shown: true });
	}

	render() {
		return (
			<button onClick={this.show.bind(this)}>Press me</button>
		);
	}

I originally posted the issue to StackOverflow, but after realizing the connection to RHL, I figured out this is more approriate place to find answers.

So, is the behavior a bug of RHL, because it does seem like so? How about fix?

I have an example app that can be used for reproducing the issue. Just embed the component above for example into index.jsx.

[calesce]

I think this is another instance of #313. Try adding either babel-preset-es2015 or just transform-es2015-classes.

[nakamorichi]

That means transpiling ES6 to ES5, which seems like a temporary fix, as there shouldn't be need for such transpilation, although it doesn't matter much either as it happens only in dev mode.

I was able to get the code working by adding transform-class-properties and transform-es2015-classes (the plugins have to be in correct loading order also):

{
	"presets": ["stage-2", "react"],
	"env": {
		"development": {
			"plugins": [
				"transform-class-properties",
				"transform-es2015-classes",
				"react-hot-loader/babel"
			]
		}
	}
}

[calesce]

That means transpiling ES6 to ES5, which seems like a temporary fix, as there shouldn't be need for such transpilation

Right, that's why it's an open issue, and adding the transform is a workaround. 😉

[nakamorichi]

Anyway, thanks for quick reply. Spent so many hours today trying to find solution. Also I don't mind the workaround as it doesn't affect the production bundle. Hope you can find solution (the issue seems to have been open already 4 months ;))