Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Error when use React component other than HelloWorld #1341

Open
Labels
@superpandaaa

Description

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

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /