ESDocが効かないパターン

fixed_index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Main from './Main';

injectTapEventPlugin();

// ここでMainをMuiThemeProviderでラップする
const App = React.createElement(Main, {});
const StyledApp = React.createElement(MuiThemeProvider, {}, App);

ReactDOM.render(
  StyledApp,
  document.getElementById('root'),
);

fixed_main.js

// main.jsx
import React, { Component } from 'react';

/**
 * メインクラス
 *
 * @todo    あとでやる
 */
class App extends Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.state = {};
  }

  render() {
    return (
      ...
    );
  }
}

// AppをexportしているのでESDocでAppの記載が出力される
export default App;

index.js

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main';

injectTapEventPlugin();

// ESLintの縛りでjsファイルにJSX形式がかけないためこのように記載
ReactDOM.render(
  React.createElement(Main, {}),
  document.getElementById('root'),
);

main.jsx

// main.jsx
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
/**
 * メインクラス
 *
 * @todo    あとでやる
 */
class App extends Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.state = {};
  }

  render() {
    return (
      ...
    );
  }
}

// Material-uiを使用しているのでMuiThemeProviderでラップする必要がある。そのため、exportでラップしていた
// 当然ながらexportしているのはStyledAppなので、ESDocではStyledAppが出力される
// 本来ならrender内か呼び出されるindex.jsで書くべき処理だった
const StyledApp = () => (
  <MuiThemeProvider>
    <App />
  </MuiThemeProvider>
);

export default StyledApp;