Error when use React component other than HelloWorld

Start with app/views/samples/index.html.erb and compare how HelloWorld.js and CodeEditor.js are referenced by the two react_component calls. Trace ReactRailsUJS.mountComponents() to determine why CodeEditor is not found; done means the CodeEditor component renders normally alongside HelloWorld under the listed Rails, React-Rails, and Shakapacker versions.

Steps to reproduce

Hi there,

I met an issue when integrating gem react-rails into my current project. And any suggestion would be much appreciated!

My ultimate goal is to build several components relying on gem react-rails into my current Rails 5 project, for better formatted interface.

I follow the tutorial here for Use with Shakapacker to install the react into my project, and generate the HelloWorld component then render it on the page successfully. However, after I generate another react component named CodeEditor, and try to use react_component helper to render, it fails with error as the screenshot.

Only component HelloWorld is rendered noramlly.

The thing is I try many other components with different names, however it can only recognize the HelloWorld component. All the others it shows the same error. The code of HelloWorld.js is below, and the content within CodeEditor.js is the same, only the variable name is CodeEditor. Thanks again!

// HelloWorld.js
import React from "react"
import PropTypes from "prop-types"

const HelloWorld = (props) => {
  return (
    <React.Fragment>
      Greeting: {props.greeting}
    </React.Fragment>
  )
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};

export default HelloWorld

// CodeEditor.js
import React from "react"
import PropTypes from "prop-types"

const CodeEditor = (props) => {
    return (
        <React.Fragment>
            Greeting: {props.greeting}
        </React.Fragment>
    )
}

CodeEditor.propTypes = {
    greeting: PropTypes.string
};

export default CodeEditor

// html page in my Rails project
<h1>Samples#index</h1>
<p>Find me in app/views/samples/index.html.erb</p>

<%= react_component("HelloWorld", { greeting: "Hello from gem react-rails." }) %>

<%= react_component("CodeEditor") %>

Expected behavior

The page should render the CodeEditor component normally

Actual behavior

Within ReactRailsUJS.mountComponents();, it somehow cannot find this CodeEditor component and post relative error in the screenshot.

System configuration

• Shakapacker version: 8.0.0
• React-Rails version: 3.2.0
• React_UJS version: 3.2.1
• Rails version: 5.2.4
• Ruby version: 2.7.7