Using console.log with an undefined value during SSR can result in syntax errors causing hydration to not run

[LinusCenterstrom]

Please verify these steps before filing an issue, and check them off as you go

• [x] The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• [x] The VC++ 2017 runtime is installed
• [x] The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• [x] I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

• ReactJS.NET: 5.0.0
• JavaScriptEngineSwitcher: 3.1.0
• react and react-dom: (N/A if using bundled react, or version number) 16.8.6
• webpack: (N/A if using bundled react) 4.28.1
• node: (N/A if using bundled react) 10.15.2

Runtime environment:

• OS: Windows
• .NET Framework or .NET Core Version: 4.7.2 and 2.1 for core (running in both)

Steps to reproduce

Create a component like this (simple version as an example, real world cases are when the variables are sometimes undefined)

const Hello =  () => {
	const x = 5;
	const stuff = undefined;
	console.log(stuff, x);
	return <div>Hello World!</div>;
}

This will result in the following javascript tag being printed console.log("[.NET]", , 5,"stacktrace...") which will cause a syntax error

Since the ReactDOM.hydrate call is after the console.log and in the same script tag it will also prevent the hydration of the React element, so you will get the page looking correct (from SSR) but it won't be interactive.

Now we should not have these types of console.log calls in production but it would be nice if it didn't crash the entire app.

The best would be if the console.log statement could be outputted like this instead console.log("[.NET]", undefined, 5,"stacktrace...")

But if not an acceptable workaround for us would be to generate a separate script tag for the console.log calls so that if they fail the hydration will still run.

[dustinsoftware]

Yep looks like a bug, feel free to send a PR. Won’t have time for a little bit to get to bug fixes..

On Mon, Sep 16, 2019 at 06:58, LinusCenterstrom [email protected] wrote:

Please verify these steps before filing an issue, and check them off as you go

• The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• The VC++ 2017 runtime is installed
• The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

• ReactJS.NET: 5.0.0
• JavaScriptEngineSwitcher: 3.1.0
• react and react-dom: (N/A if using bundled react, or version number) 16.8.6
• webpack: (N/A if using bundled react) 4.28.1
• node: (N/A if using bundled react) 10.15.2

Runtime environment:

• OS: Windows
• .NET Framework or .NET Core Version: 4.7.2 and 2.1 for core (running in both)

Steps to reproduce

Create a component like this (simple version as an example, real world cases are when the variables are sometimes undefined)

const Hello = () => { const x = 5; const stuff = undefined; console.log(stuff, x); return

Hello World!

; }

This will result in the following javascript tag being printed console.log("[.NET]", , 5,"stacktrace...") which will cause a syntax error

Since the ReactDOM.hydrate call is after the console.log and in the same script tag it will also prevent the hydration of the React element, so you will get the page looking correct (from SSR) but it won't be interactive.

Now we should not have these types of console.log calls in production but it would be nice if it didn't crash the entire app.

The best would be if the console.log statement could be outputted like this instead console.log("[.NET]", undefined, 5,"stacktrace...")

But if not an acceptable workaround for us would be to generate a separate script tag for the console.log calls so that if they fail the hydration will still run.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/reactjs/React.NET/issues/907?email_source=notifications&email_token=AAHGCFW3QJWZH7ZLBEVTCYLQJ6GG3A5CNFSM4IXCUXC2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HLS36XA, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHGCFQI6WIDNG3YMSYSU6LQJ6GG3ANCNFSM4IXCUXCQ .

[XieJJ99]

@dustinsoftware We also encountered this issue, is there any update on this?