How use react-rails with webpacker?

Question

I created example project react-rails with webpacker. but show error "Uncaught ReferenceError: Person is not defined". help me How use react-rails with webpacker? The processing I performed is 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 react-rails 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 react_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' %>

Run 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)

example project

https://github.com/yokochi/webpacker_example

Exaggerated

have you solved your problem? I'm also wasting my time :) to solve how it should work... :( – Crackpot

@Crackpot see my answer. – Appendant

Did you compare react-rails to github.com/shakacode/react_on_rails? – Statesman

Answer 1

Either rename app/javascript/components/person.js to app/javascript/components/Person.js (e.g. capitalize)

Or use react_component('person') instead.

TLDR; capitalization matters.

Appendant

I've renamed file, how ever new issue came... [react-rails] Cannot find component: 'Post' for element <div data-react-class="Post" data-react-props="{&quot;title&quot;:&quot;Hello World&quot;}"> application.js:29060:11 Error: Cannot find component: 'Post'. Make sure your component is available to render. I've tried to include javascript above or below the component - without any luck ;( – Crackpot

@Crackpot just to confirm: your file is named app/javascript/components/Post.js and you've installed webpacker using the steps here: github.com/reactjs/react-rails#use-with-webpacker, yes? – Appendant

ofcourse this issue is solved - renaming file solved the problem with Uncaught ReferenceError, but after this I've got issue with 'cannot find component' :( – Crackpot

@Crackpot Can you push a sample repository so I can help you better? – Appendant

Answer 2

@Akio Yamazaki

https://github.com/yokochi/webpacker_example/commit/55ca96c1257e611dfb17b27fe53b402a97d5dedc#diff-0c7c7cb70dec34ec9dcff19a0f5bd40bR1

you should require('react') in your component and export component

try this...

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 be 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: {props.name}</div>
)

export default Person

I have a repo maybe able to give some reference

https://github.com/kakas/react-rails_with_webpacker_example/commits/master

Longs

Answer 3

Maybe it's too late, I had the same problem and I solved changing version in my Gemfile; this should work:

gem 'react-rails', '~> 1.7', '>= 1.7.1'

Saul