Updates to Node Renderer: Turbolinks: Uncaught Error: unmountComponentAtNode

[3den]

I recently updated to the lattest React on Rails v6.10.0, which did fixed the blinking issue #706 of turbolinks reload. But the problem is that every time I navigate to any link react raises a Uncaught Error: unmountComponentAtNode(...): Target container is not a DOM element..

@szyablitsky @justin808 Is this a know issue?

[justin808]

@3den Please review all issues and PRs regarding Turbolinks and let me know your thoughts.

Even better is to submit a PR that addresses the issue.

Thanks,

Justin

[3den]

@justin808 seems like none of the issues address this problem, if I disable serverside rendering the pages wont even render. Below is the code of my application.js.erb:

//= require turbolinks
//= require webpack-bundle

ReactOnRails.setOptions({
  traceTurbolinks: <%= Rails.env.development? %>
});

[3den]

this is what i get on the logs

TURBO: USING TURBOLINKS 5: document added event listeners  turbolinks:before-visit and turbolinks:load.
TURBO: reactOnRailsPageLoaded
Clicked link
TURBO: reactOnRailsPageUnloaded
Uncaught Error: unmountComponentAtNode(...): Target container is not a DOM element.
...

[justin808]

I would not turn on and off turbolinks

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/app/assets/javascripts/application_static.js

react_on_rails/spec/dummy/client/app/startup/clientRegistration.jsx

Line 31 in d5d579e

ReactOnRails.setOptions({

you cannot turn turbolinks on for server rendering, which is what you are doing by putting that JS code in your application.js

https://github.com/shakacode/react_on_rails/search?utf8=%E2%9C%93&q=traceTurbolinks&type=

[3den]

@justin808 we are using node server, which will only load the webpack file that does not have turbolinks anywhere.

Is it posible to get turbolinks to work with server side rendering? I saw on the dummy app but is a bit hard to understand how/if you guys got turbolinks working there.

[3den]

Also even removing turbolinks the components don't render when serverside rendering is disabled, it was working fine on version 6.5.1 tho.

Was there any breaking change on the api?

[justin808]

@3den Hi! I'd love to get your feedback on the Node server for rendering! I sent you an invite to our slack room.

Turbolinks is a client side technology. @3den, how does it relate to server rendering for you?

Thanks,

Justin

[3den]

The turbolinks problem has nothing todo with the node server. The node server works fine but I did some changes on it https://gist.github.com/3den/1416fc25a47208f73be8dbbc7e98ca52 .

The problems i have with the nodeserver is that it does not pick changes on the on the webpack file, as it should, and I have to manually delete the node.sock.

// client/package.json
{
  ...
  "scripts": {
    ...
    "node-server": "rm -f node/node.sock && node ./server.js"
  }
}

[3den]

thanks for the help @justin808, every think seems to be working fine now, the problem was because I forgot to update the node_module after updating the gem.

I noticed that the you replaced npm with yarn and that broke my tests, but i fixed it with this:

class NodeTester
  attr_reader :config

  def initialize(config)
    @config = config
  end

  def compile_and_launch
    compile_assets
    launch_node
  end

  def compile_assets
    ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
  end

  def launch_node
    path = Rails.root.join('client', 'node')
    puts "Launching NodeJS server at #{path}"
    system("cd #{path} && npm start &")
    sleep(1)
  end
end

[justin808]

@3den @alleycat-at-git Should this get merged back into the main project? or maybe a file in /docs/additional-reading? Such as here:

https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/node-server-rendering.md