Description
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
SetUseReactandSetUseBabelis correct inReactConfig.csorStartup.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.0JavaScriptEngineSwitcher: 3.1.0reactandreact-dom: (N/A if using bundled react, or version number) 16.8.6webpack: (N/A if using bundled react) 4.28.1node: (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.