elixir_react_render

elixir_react_render copied to clipboard

This is pretty awesome, and looking to put it or maybe slight variant into production.

1. Have you had success running in a mix release and in production?
2. We've had an issue related to console.log statements in JS components causing the ReactRender.render function to fail. Is this a bug? should we try and shim out console.log when running on the server?
   • worked around it by wrapping the console.log in an isBrowser function to ensure it only runs client side, but this is not ideal. (maybe this should be its own issue?)

Thanks for publishing!

I have a modified fork of this repo made to work with svelte.js, we're using it with mix release without any problems.

My understanding of the console logging issue is due to the way elixir-nodejs works—a given component is rendered in node using Port.command. Port.command communicates with the node executable via Stdin, and reads output, i.e. rendered HTML from node via Stdout. This means that if you console.log from within node, those log statements will get printed to Stdout and assumed to be the rendered HTML.. which will result in React.js throwing an error about your "HTML" not making sense.

My way around this was to create a CLI that allows me to manually render components while being able to view console log output.

Thanks @benwoodward!

Yea I figured as much about the logging problem, your CLI idea is a good work around, will try it!

Wonder if in the renderer process we can somehow redirect console.log statements elsewhere, retaining the functionality of the render call, if this was an optional flag would still be able to debug in the way you are via the CLI utility...

Think even just resigning the function to a no-op would work I.E:

console.log = (...args) => {}

UPDATE:

Can confirm, updating the render_server.js file to the following seemed to squash console.logs on the server, but still has them working on the client. For this to be truly effective, would need to do it for all the console.X functions though....

require("@babel/polyfill");
require("@babel/register")({ cwd: __dirname });

console.log = (...args) => {};

module.exports = require("react_render/priv/server");
``
 

@benwoodward I am having some trouble getting the cli script working for react.

I am still a bit unclear on how the dependencies are being loaded when run in the context of elixir, and when running directly against node, like the example in the cli comments, I am getting the following error:

Error: Cannot find module 'react-dom/server'

And obviously the server render pretty much blows up at that point. But still works running it via elixir...I am hoping this is more related to module loading than react, as I know your fork is running svelte.

Any ideas?

I can see you are using require('svelte/register'); instead of:

require('@babel/polyfill')
require('@babel/register')({cwd: __dirname})

This is where I think the problem lives, and as mentioned above this bit is what I don't fully understand...

Regarding the root of all this, I have also tried with some success overwriting console.log with a custom console that writes to a file.

In assets/render_server.js

const fs = require("fs");
// whatever outstream, for examples sake: 
const out = fs.createWriteStream("./out");
const redirectedConsole = new console.Console(out);
# and reassigning the global console.x functions
console.log = redirectedConsole.log;
console.error = redirectedConsole.error;
# ... etc

module.exports = require("react_render/priv/server");

So now we don't error out when console.x happen, and we can read the logs! I think it would be cool to have an enhanced version of this idea have these logs show up similar to how the webpack logs are included when running in dev...if i get anywhere will report back

You're running your CLI with node priv/cli <options>? Is your code on Github?

Was able to get it working, here is a gist

Needed to run :

require("@babel/polyfill");
require("@babel/register")({ cwd: __dirname });

And it seems to fix the problem I was having.

I have resorted to just:

console.log = (...args) => {};
console.error = (...args) => {};

In my render_server as a decent mechanism of keeping the process crashing because of logs. I also experimented a bit with a phoenix channel logger that worked pretty well.

Here is the javascript part

Could probably be packaged up into its own module and used along side a more generalized SSR library to provide a nicer development experience - with all logs appearing in the same console, reminiscent of frameworks like NextJS.

Sorry, did not see this ticket. There is a known issue in elixir-nodejs that has to do with the console.log issue. We do have a possible fix for it in latest release for it, but there is a bug that needs to be fixed still before we go ahead and bump it up. Definitely agree that this can be a lot more generalized. The current workaround is to just redefine the console.* outputs to not do anything.

This lib looks great! Any updates on this issue? Is this still maintained?