How do I use rails with webpacker?
I've created example relay projects with webpacker. but show the error "Do not include ReferenceError: Person is not defined". help me How to use relays with webpacker? The processing performed is carried out as follows.
Rails version
$ rails -v
Rails 5.0.2
Gem version
react-rails (2.1.0)
webpacker (1.1)
Create Rails Project
$ rails new example
Add webpacker and re-reils to Gemfile
gem 'webpacker', github: 'rails/webpacker'
gem "react-rails"
Install webpacker and react
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
Create controller
$ bin/rails g controller home
Add route
config/routes.rb
root "home#index"
Add react component
$ bin/rails g react:component person name --es6
Add response_component tag
app/views/home/index.html.erb
<%= react_component("Person", { name: "Hello" }) %>
Add javascript_pack_tag to application.html.erb
app/views/layouts/application.html.erb
<%= javascript_pack_tag 'application' %>
Start the server
$ bin/rails s $ bin/webpack-dev-server
Show error console
VM27375:1 Uncaught ReferenceError: Person is not defined
at eval (eval at module.exports (fromGlobal.js?fc31:13), <anonymous>:1:1)
at module.exports (fromGlobal.js?fc31:13)
at Object.getConstructor (fromRequireContextWithGlobalFallback.js?cbbb:16)
at Object.mountComponents (index.js?c0e8:82)
at HTMLDocument.ReactRailsUJS.handleMount (index.js?c0e8:124)
at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
Sample project
+3
source to share
2 answers
@ Akio Yamazaki
you need ("react") the component and the export component
try it...
var React = require("react")
class Person extends React.Component {
render () {
return (
<div>
<div>Name: {this.props.name}</div>
</div>
);
}
}
Person.propTypes = {
name: React.PropTypes.node
};
module.exports = Person
but this way is better
import React from 'react'
class Person extends React.Component {
constructor(props){
super(props)
}
render() {
<div>Name: {this.props.name}</div>
}
}
export default Person
or...
import React from 'react'
const Person = (props) => (
<div>Name: {this.props.name}</div>
)
export default Person
I have a repo, maybe can give some link
https://github.com/kakas/react-rails_with_webpacker_example/commits/master
+1
source to share