2017-04-18 4 views
0

Ich verwende den Rect-Rails-Edelstein in einem Rails (4.2.7) -Projekt. Dies ist die einzige Änderung ich meine Standard-Gemfile gemacht haben:jsx scheint nicht korrekt zu übertragen

gem 'react-rails' 

ich eine Komponente in einer .jsx Datei mit es6 Syntax definiert haben:

Dies funktioniert gut, aber wenn ich
class Foo extends React.Component { 
    render() { 
    return (<h1>hello</h1>) 
    } 
} 

versuchen, ein js Modul zu importieren, erhalte ich eine Fehlermeldung:

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 is not defined

Es scheint mir, dass, wenn ich transpiling nicht die jsx correctl y Dann würde ich im ersten Fall einen Fehler bekommen, aber ich bin es nicht. Ich habe jsx den ganzen Tag lang ohne Probleme verwendet, bis ich versuchte, import zu verwenden.

Ich habe versucht, indem die folgenden meiner Gemfile:

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

Ich habe versucht, diese zu config/Umgebungen/development.rb:

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

Und ich habe versucht, Erzeugen Die Komponente, die die Schienen verwendet, reagiert auf den Komponentengenerator mit der Markierung --es6:

rails g react:component Foo --es6 

Was fehlt mir?

+2

Eigentlich wurde Ihr Code von babel richtig transpiliert. Das Problem liegt beim Importieren. Sie müssen etwas wie https://github.com/rstacruz/npm-pipeline-rails verwenden, um die npm-Module in die Assets-Pipeline zu bekommen und sie dann mit der endgültigen js zu bündeln. – Panther

Antwort

0

Also hier ist, wie ich mein Problem gelöst: Da bin ich mit der ‚reagieren Schienen‘ Juwel, die Addons über eine Konfigurationsoption zur Verfügung stehen - Ich habe folgendes config/application.rb:

config.react.addons = true 

Dann in meiner .jsx Datei, statt import, das ist die Syntax habe ich Zugriff auf ReactTransitionGroup haben:

var ReactTransitionGroup = React.addons.ReactTransitionGroup 

ich verstehe immer noch nicht, aber vielleicht eines Tages werde ich, warum die import Aussage transpiles zu require whic h ist nicht definiert, und wie kann das durch etwas anderes als das Definieren von require oder durch das Transpilieren auf etwas, das definiert ist, behoben werden.

Verwandte Themen