React 18 root support #1286
React 18 root support #1286
Conversation
|
@LinusCenterstrom, In your PR, is it possible to control the used API per root component? |
|
It's currently only a global configuration |
|
Thanks!!
I see the PR checks are failing, is that new to this PR?
…On Mon, Apr 11, 2022 at 02:40, LinusCenterstrom ***@***.***> wrote:
It's currently only a global configuration
—
Reply to this email directly, view it on GitHub
<#1286 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHGCFRY5WQT5VP3VQR52FTVEPCOXANCNFSM5SIVUTMQ>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Don't think so, looks like they are failing on all PR:s from what I can see |
There was a problem hiding this comment.
I'm interested on react 18 support too!
nice job @LinusCenterstrom, thanks!
any update on the pull request status?
|
I also need this. Is the project dead? Any alternatives to get React 18 support? |
|
@magnusottosson If you are still looking, you could use the main branch of our fork here https://github.com/MultinetInteractive/React.NET which I made to fix it for my company's use. It is only supported if you supply your own version of React & ReactDOMServer. (.SetLoadReact(false) during startup) The initialization code for our serverbundle looks like this (we bundle through webpack) var ReactDOMServer = require(process.env.NODE_ENV !== "production"
? "../node_modules/react-dom/cjs/react-dom-server-legacy.browser.development"
: "../node_modules/react-dom/cjs/react-dom-server-legacy.browser.production.min.js");
var React = require("react");
var ReactDOM = require("react-dom");
if (!global) {
global = {};
}
global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;We've been using it in production pretty much since I opened this PR and it seems to work fine. It is not very likely that we will add support for anything other than what we use internally however. |
|
It feels like the repo is dead - nobody managing it. What a shame. |
| /// Enables usage of the React 18 root API when rendering / hydrating. | ||
| /// </summary> | ||
| /// <returns></returns> | ||
| void EnableReact18RootAPI(); |
There was a problem hiding this comment.
| void EnableReact18RootAPI(); | |
| IReactSiteConfiguration EnableReact18RootAPI(); |
| public void EnableReact18RootAPI() | ||
| { | ||
| UseRootAPI = true; | ||
| } |
There was a problem hiding this comment.
| public void EnableReact18RootAPI() | |
| { | |
| UseRootAPI = true; | |
| } | |
| public IReactSiteConfiguration EnableReact18RootAPI() | |
| { | |
| UseRootAPI = true; | |
| return this; | |
| } |
fixes #1285
This is mostly unrelated to #1265 and still uses the renderToString API
Things that should probably be done before this is merged (happy to help with this if you want)
I have not looked into making this work with the automatically bundled versions of React & ReactDOM if LoadReact is set to true.
For anyone else looking to make this work:
To make the js code run server-side you have to change the import of
react-dom/serverto instead beeact-dom-server-legacy.browser.production.min.jsorreact-dom/cjs/react-dom-server-legacy.browser.developmentsince the new server-renderer uses classesthat do not exist in the .net JS environment and instantly crashes.
The globally exposed window.ReactDOM object on the clientside should be imported from react-dom/client instead of react-dom