JSX, кажется, не проходит правильно

Question

Я использую самоактивный реактивный рельс в проекте Rails(4.2.7). Это единственное изменение, которое я сделал в моем Gemfile по умолчанию:

gem 'react-rails'

Я определил компонент в файле.jsx, используя синтаксис es6:

class Foo extends React.Component {
  render () {
    return (<h1>hello</h1>)
  }
}

Это работает нормально, но когда я пытаюсь импортировать модуль js, я получаю сообщение об ошибке:

import ReactTransitionGroup from 'react-addons-transition-group'
class Foo extends React.Component {
  render () {
    return (<h1>hello</h1>)
  }
}

foo.es6.self-69f3a42….js? body = 1: 11 Uncaught ReferenceError: require не определен

Мне кажется, что если я не правильно переношу jsx, то получу ошибку в первом случае, но это не так. Я использую JSX весь день без проблем, пока я не попытался использовать import,

Я попытался добавить следующее в мой Gemfile:

gem 'sprockets-es6'
gem 'babel-transpiler'

Я попытался добавить это в config/environment /development.rb:

config.react.jsx_transformer_class = React::JSX::BabelTransformer

И я попытался сгенерировать компонент, используя генератор компонентов rails response с флагом --es6:

rails g react:component Foo --es6

Что мне не хватает?

Answer 1

Итак, вот как я решил свою проблему: поскольку я использую гем 'Reaction-Rails', дополнения доступны через опцию конфигурации - я добавил следующее в config/application.rb:

config.react.addons = true

Тогда в моем.jsx файле вместо importэто синтаксис, который я использовал, чтобы иметь доступ к ReactTransitionGroup:

var ReactTransitionGroup = React.addons.ReactTransitionGroup

Я до сих пор не понимаю, но, может быть, когда-нибудь я пойму, почему import заявление передается require который не определен, и как это можно исправить с помощью чего-либо, кроме определения requireили переходя к чему-то определенному.