Can we have a blog post on migrating from react-on-rails to react-rails

[Faizaankhan3]

Steps to reproduce

While migrating from react-on-rails to react-rails, I have transferred the same folder structure in App/Javascript While other configurations are okay, and web pack is successfully compiled

Expected behavior

The component should be rendered

Actual behavior

ReferenceError: CandidateExam is not defined

Folder Structure: app/javascript -- --components --CandidateExam --actions --api --components --containers --helpers --reducers ajax.js constants.js --packs application.js

System configuration

ruby: 2.3.3 'rails', '5.2.0' 'webpacker', '3.5' 'react-rails', '2.4.4' "react_ujs": "^2.4.4"

Contains of application.js

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

I am calling this from my erb file

<%= javascript_pack_tag 'application' %>
<%= react_component("CandidateExam/containers/index") %>

This is what my server has to say

Processing by ExamController#index as HTML
  Rendering exam/index.html.erb within layouts/application
[Webpacker] Compiling…
[Webpacker] Compiled all packs in /home/kreetiuser/dev/smart_recruit/public/packs
  Rendered exam/index.html.erb within layouts/application (4588.9ms)
  User Load (48.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 2 LIMIT 1
  Rendered layouts/_header.html.erb (108.7ms)
  Rendered shared/_flash_messages.html.erb (0.8ms)
  Rendered layouts/_footer.html.erb (0.7ms)
Completed 200 OK in 5167ms (Views: 5116.9ms | ActiveRecord: 48.4ms)

Also, there's no guide to migrate from react-on-rails to react-rails while the vice-versa is flooded in the internet.

[ttanimichi]

You have to put components under the directory which you have specified in your packs files. The default value of the directory name is components. https://github.com/reactjs/react-rails#file-naming

[ttanimichi]

The following command may solve the error.

$ mv app/javascript/CandidateExam app/javascript/components

[BookOfGreg]

Yep @ttanimichi beat me to it!

To expand, you specified the components directory in this line: var componentRequireContext = require.context("components", true)

[faizaankhan]

I made an index under components and called others. Works for me like that. Putting the CandidateExam inside components folder didn't help.

[faizaankhan]

Folder Structure:

# app/javascript --
  ## --components
    ### --CandidateExam
      --actions
      --api
      --components
      --containers
      --helpers
      --reducers
  ajax.js
  constants.js
  ## --packs
  application.js

CandidateExam was already under components

[faizaankhan]

react_on_rails is one of the important gems used, react-rails guys should have a brief tutorial on migrating from react_on_rails to react-rails. It feels very simple after completion, but lack of sources made it tough. I might be writing one blog to do the same.

[rystraum]

@faizaankhan @Faizaankhan3 Hard for us to see the folder structure you're outlining because whitespace is clobbered in markdown. Can you wrap your folder structure text around code blocks so we can see exactly which folder structure you had? (e.g. specify ``` in its own line as start and end of the code block)

\```
Like this (remove the \)
\```

[faizaankhan]

I had already solved it, It works well this way:

[faizaankhan]

Making subfolder inside of the container was causing a problem, had tried everything logical and then had to do this brute force fix.

[alkesh26]

As per the above discussion, we know the solution. Closing the issue.