rails generate react:install after webpacker react install runs incorrect insertions

[lasernite]

Help us help you! Please choose one:

• My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.

---

After running

$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

The following is executed

create  app/assets/javascripts/components
create  app/assets/javascripts/components/.gitkeep
insert  app/assets/javascripts/application.js
insert  app/assets/javascripts/application.js
insert  app/assets/javascripts/application.js
create  app/assets/javascripts/components.js

But I am under the impression that a ReactRailsUJS setup in packs/application.js should occur.

I had originally installed react-rails first, before webpacker, which may be why this is happening. But as far as I can tell I deleted all the files and removed the assets/javascripts/application.js references before running them in order, so I'm not sure why this is happening unless there is a hidden config somewhere. Also, without digging through the gem if you could let me know what needs to be in the app/javascript/application.js to configure manually, that would be appreciated. Thanks.

[lasernite]

Purging all the files added by rails generate react:install and then manually installing react and react_ujs with yarn add react and yarn add react_ujs, then adding

var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

To the app/javascript/application.js (which I found in another thread) and then creating a app/javascript/components directory and adding a file like Test.jsx with the contents

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

class Test extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Test;

Finally allowed me to use the react-rails view-helper, like
<%= react_component('Test', {name: "Laser"}) %> successfully.

[rmosolgo]

How weird! I wonder, did this check fail?

https://github.com/reactjs/react-rails/blob/master/lib/generators/react/install_generator.rb#L57-L59

(That is supposed to signal a webpacker install instead of a sprockets install, but I guess it failed :S )

[sebyx07]

use class names downcased
<%= react_component('test', {name: "Laser"}) %>
and you can nest them test/another

[koffeinfrei]

I had the same problem. Issuing spring stop resolved it.

[BookOfGreg]

@lasernite is this still an issue?
I have this problem occasionally if I'm using Spring and I keep generating rails apps called foo for testing.

[BookOfGreg]

Closing for now.