Как сделать react + require.js вместе?

Question

[desuvin]

Если гуглить данный вопрос, то находится вариант, где jsx компилируется прямо в браузер. Однако я хочу сделать компилировать в js через babel и подключать по require.js
В конфиге require.js прописано следующее:

require.config({
baseUrl: '/js/',
paths: {
react: "libs/react",
ui: "react"
}
});

requirejs(["ui/main"]);

В самом jsx файле

define(["react"], function(React) {
  class Test extends React.Component {
    render() {   
      return (

        <div>12312312123123</div>

      );
    }
  };

  React.render(
    <Test />,
    document.getElementById('test')
  );

});

babel отрабатывает без проблем, jsx тоже превращается в js. require.js грузит предварительно React, а далее срабатывает именно этот компонент.
Вроде все должно быть хорошо, но выводит какую-то сосвем страшную ошибку

Uncaught TypeError: Super expression must either be null or a function, not undefined

Comments

[kostik]

Ответ не совсем соответствует вопросу.
Тем не менее.
browserify.org
+
https://github.com/andreypopp/reactify

[desuvin]

kostik: Я пробовал такой способ, но на выходе получается js файл весом 1.5 метров. Почему так, не подскажите?

[kostik]

В минимальной комплектации:
+ gulp.js
+ browserify
+ beactify
+ babelify
+ jest

https://github.com/kostik-noir/toster-ru-212873

Конечные файлы разделены на 2 части:
* app.js - код только приложения
* vendor.js - vendor код

Несжатые версии:
* app.js - 3.4 KB
* vendor.js - 607 KB

Для сравнения, размер dist/react.js из https://github.com/facebook/react - 585KB

[desuvin]

Спасибо, разобрался)

[kostik]

этот репозиторий ещё нужен? или можно удалять?

Answer 1

[Николай Костюрин]

Судя по тексту ошибки, каким то образом метод super() который обычно вызывается в конструкторе

constructor(props) {
   super(props); // вот тут получили undefined
}

И скорее всего получили, потому что отнаследоватся от React.Component так и не получилось