controller method 'render component' fails to import properly where <%=react_component() %> successfully imports the same files)

[mofmn]

Steps to reproduce

My intent was to have my application View Yield a react component that is defined in the controller via render component:... then i would rarely have to interact with rails Views, and react components are now my views.

This works in principle, but it fails under specific cases. Presumably because it renders the component in a different order to the render_component method available in Views as this method does not bug in the same way, and works as expected.

This will bug by giving an error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and
named imports

When your imports are fine, this was caused in my case by window.screen.availWidth used above the export default function Component(){}
being used in one of the imported files. This was in my case redundant so i could remove it for this import, but unfortunately i also import Uppy in one of my files and this causes the same error - import { DashboardModal } from '@uppy/react' (presumably because they do something similar, but i cannot change the source code here.)

This makes it impossible to render my react in this way. Which is annoying because i now have to use the view and it's more convoluted that way. The method react_component used in views works just fine and does not experience this bug - presumably because at compile time or similar the window object exists as opposed to rendered from the controller where the window has not been instanced, but thats a guess.

So to summarise - Controller method 'render component: ' fails to import certain files due to import error when View method react_component succeeds just fine. Presumably because they load the files at different times.

What should happen - the controller method should load the files at the same time as render_component in order to more robustly load imports. ( or if this is not the cause, the controller method should be brought in line with the view method so as not to fail imports )

Current workaround - just use Views with <%= react_component "Component" %> inside the view instead.

react rails 2.6.1

[Muhammad-Abdullah-11]

is there any update on this issue?

[ahangarha]

May you create a repo to demonstrate the issue?

[shaquan1228]

May you create a repo to demonstrate the issue?

This is my first contribution to open source code. Please be friendly and find ways to make sure that I see your replies.

I think that @mofmn is thinking correctly. @ahangarha I don't think that we need a repo in order to describe how this is valuable if we think about what we should be able to say:

An Example

If we are engineering to say: I have a business layer and I want to let someone interface with it... let's work from there. Then, if we only focus the user interface right now (because Typed Structs and a ton of other things will solve the data interface problem that we will need to provide) then we see a new problem. Let's see an example:

The edge of my business layer:

Lives in: app/controllers/my_controller.rb

class MyController < MyBaseController
  def show
    respond_to do |format|
      format.js { render react_component('View', props: { someProp: 'value' }) } # expose the user interface layer
      format.json { render :show } #expose the data interface layer 
    end
  end
end

The user interface of my business layer:

Lives in: app/javascript/index.js exports the View component

ReactOnRails.register({
  View
 });

I am struggling to keep it that simple. It should be even simpler. I'm hoping someone agrees and suggests a way to make this possible and simple. It should be so simple that I don't need to differentiate between .js.erb and .json.whatever, but it isn't and I'm hoping that I just don't know enough.

[ahangarha]

@shaquan1228 Thanks for your comment.
Asking for a repo to reproduce the issue is not to prove the value but to create a common ground on which the reporter and the developers can communicate better.