Error when use React component other than HelloWorld

Author: superpandaaaCreated Jun 18, 2024Updated Sep 27, 2024
Labelsdiscussion

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.

image

Only component HelloWorld is rendered noramlly.

Screenshot 2024-06-18 at 11 10 48 AM

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!

bash
// 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
bash
// 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