Skip to content

Error when use React component other than HelloWorld #1341

Open
@superpandaaa

Description

@superpandaaa

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!

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions