React 16

[wub]

Now that React 16's out, will there be any way to use it with React.NET?

I've tried loading it myself, with SetLoadReact(false) & AddScriptWithoutTransform("react+react-dom"), but it says that React isn't exposed properly (so I can't begin to debug issues).

Is there some way to tell React.NET which major version of React to work with? Or will the project only ever support one at a time? I understand the maintenance and complexity implications! Cheers.

[Daniel15]

I've tried loading it myself, with SetLoadReact(false) & AddScriptWithoutTransform("react+react-dom"), but it says that React isn't exposed properly (so I can't begin to debug issues).

When using your own version of React, it expects React, ReactDOM and ReactDOMServer globals, or global.React, global.ReactDOM and global.ReactDOMServer to be set correctly:

React.NET/src/React.Core/Resources/shims.js

Lines 52 to 68 in 5d1bd9d

	if (
	typeof React !== 'undefined' &&
	typeof ReactDOM !== 'undefined' &&
	typeof ReactDOMServer !== 'undefined'
	) {
	// React is already a global, woohoo
	return true;
	}
	if (global.React && global.ReactDOM && global.ReactDOMServer) {
	React = global.React;
	ReactDOM = global.ReactDOM;
	ReactDOMServer = global.ReactDOMServer;
	return true;
	}
	// :'(
	return false;

React.NET/src/React.Core/JavaScriptEngineFactory.cs

Lines 182 to 191 in 5cdd2f4

	var result = engine.CallFunction<bool>("ReactNET_initReact");
	if (!result)
	{
	throw new ReactNotInitialisedException(
	"React has not been loaded correctly. Please expose your version of React as global " +
	"variables named 'React', 'ReactDOM' and 'ReactDOMServer', or enable the " +
	"'LoadReact' configuration option to use the built-in version of React. See " +
	"http://reactjs.net/guides/byo-react.html for more information."
	);
	}

You can see how ReactJS.NET builds the built-in React version:

https://github.com/reactjs/React.NET/blob/5d1bd9d73d32d07f42abbc0060f90cb38b988070/src/React.Core/gulpfile.js

https://github.com/reactjs/React.NET/blob/5d1bd9d73d32d07f42abbc0060f90cb38b988070/src/React.Core/Resources/react.js

Is there some way to tell React.NET which major version of React to work with? Or will the project only ever support one at a time?

Not supported at the moment, but it's a good idea. I don't have time to build it myself, but I'd be happy to review a pull request adding this functionality.

[dustinsoftware]

Hey @wub you can use React.NET with React 16 by bundling it ahead of time along with your components, and then passing the component bundle to the engine. As long as the globals are exposed correctly, it should just work.

React.NET does not currently handle componentDidCatch very well.. going to investigate if that can be easily added. Right now if a component throws, the server render gives up immediately.

[wub]

Thanks @dustinsoftware and @Daniel15 - it works!

[Daniel15]

Let's keep this issue open as ReactJS.NET still needs to be updated to ship with React 16 😃

[svashisth07]

@dustinsoftware , I want to use React 16 error boundary feature to log javascript error but it's not working with ReactJS.NET. do you have any fix?

[dustinsoftware]

Yes, although I didn’t push it since it was out of scope. I’ll open another PR. In my project server render for that component gets skipped if an error is thrown (this includes those with error boundaries). This introduced a problem - I had to hack around it a bit since react.net tries to hydrate to a div that isn’t there when this happens. My fix was to find the generated ID in the exception that’s thrown and manually render a div, which fixes the hydrate step. Since this is an error condition the right thing to do would be to still throw an exception so you can know about and fix the bug, but still allow client render to happen. So my PR would just allow more graceful handling of this error condition.

…

On Fri, Nov 3, 2017 at 00:57, sandip vashisth ***@***.***> wrote: @dustinsoftware <https://github.com/dustinsoftware> , I want to use React 16 error boundary feature to log javascript error but it's not working with ReactJS.NET. do you have any fix? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#439 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5hFt8mkSpfVrw3pjnpVZz-t279z3zDks5sysdagaJpZM4PlDHy> .

[svashisth07]

@dustinsoftware Thanks. 👍

Awaiting your PR merge :)

[Daniel15]

I didn't get around to publishing a new version of ReactJS.NET this weekend (had too many other things to get done) but I'll try to release one tomorrow night. In the meantime, you can get a build from the build server. Instructions are on the site :)

[wub]

#445 🍾

Thanks @dustinsoftware and @Daniel15.

[Daniel15]

@dustinsoftware did all the work, I just pushed the NuGet packages 😛 Thanks Dustin!

[dustinsoftware]

Yep!

…

On Tue, Dec 19, 2017 at 04:37, Srdjan Rakic ***@***.***> wrote: Does ReactJS.NET now supports React 16? Thanks in advance. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#439 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5hFqj4Y3Zx8H7YXuf_rac34c9st6kLks5tB637gaJpZM4PlDHy> .