Does not catch errors inside components that are decorated

[qimingweng]

This is interesting, I have been debugging this for a while, but I've noticed that when a component is wrapped by a decorator, thrown errors in its render function do not get caught!

// index.js

require('!!file?name=index.html!../index.html');

import React from 'react';
import ReactDOM from 'react-dom';

const mountNode = document.getElementById('app');

const loading = Component => {
  return class extends React.Component {
    render() {
      return <Component/>;
    }
  };
};

@loading
class App extends React.Component {
  render() {
    throw new Error('hello');

    return <div>
      App2
    </div>;
  }
}

ReactDOM.render(
  <App/>,
  mountNode
);

This is my babel config:

// babel config

const babelConfig = {
  presets: ['react', 'es2015', 'stage-0'],
  env: {
    development: {
      presets: ['react-hmre'],
    },
  },
};

[qimingweng]

This is the full project I'm using, to reproduce.

https://github.com/qimingweng/react-transform-catch-errors-bug

[gaearon]

cc @thejameskyle

[jamiebuilds]

Decorators are not yet supported in Babel 6. Track https://phabricator.babeljs.io/T2645

[qimingweng]

@thejameskyle I see. I was using https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy to get the decorators to work again.

I have two questions, if you'll indulge me:

1. Does react-transform run before other babel plugins? Is there a way to specify which order babel plugins are used? That way, perhaps I can run transform-decorators-legacy before running react-transform and then get this feature back.
2. The hot loading module still works with transform-decorators-legacy, any thoughts as to why this module would be different?

[qimingweng]

And side note, changing the syntax from decorator to regular function application does indeed allow this package to work again.

[jamiebuilds]

Does react-transform run before other babel plugins? Is there a way to specify which order babel plugins are used?

That's not really how it works, all plugins get run at the same time

[qimingweng]

@thejameskyle Thanks for clearing that up. Reading https://phabricator.babeljs.io/T6730 it makes a lot more sense now.