ReactDOM.hydrate() is deprecated, console error

[Gazook89]

Renderer

Both

Browser

Chrome

Operating System

MacOS

What happened?

The dev build throws a console error about hydrate() being deprecated:

bundle.js:5698 Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot printWarning @ bundle.js:5698 error @ bundle.js:5672 hydrate @ bundle.js:35308 start_app @ bundle.js:115099 (anonymous) @ bKgbDQxBsmMw:20

This is a stab in the dark, but is this coming from Vitreum? This line in particular:

        const clientSideHydrate = `;start_app=(props={},target=document.getElementsByTagName('main')[0])=>require('react-dom').hydrate(require('react').createElement(${opts.name}, props),target);`

possibly relevant react doc:https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

[5e-Cleric]

@calculuschild Do we want to fix this in your Fork or open a PR to make the change to webpack or another bundling program? @Gazook89 @G-Ambatte @ericscheid @dbolack-ab Could use everyone's opinion on this, specially if someone wants to try.

[calculuschild]

I can fix this on my Vitreum branch for a quick fix now but we should eventually move to a new bundler. That will probably be a larger project.

At some poiny I think Webpack was looking like the best option but not sure if that's still true.

[Gazook89]

Isn't vitreum a combination of multiple tools? Browserify, vite, babel, etc? So pulling it out would necessitate bringing all of those into the homebrewery repo as separate pieces?

Not against it, and maybe i have that wrong.

Edit: And this issue probably isn't the place to comment on a large change like that.

[5e-Cleric]

Opened Migrate from Vitreum to Webpack AND/OR other services (#3480) to track that.

[calculuschild]

Yeah it is. Browserify and Babel, but we already kind of pulled them out into our BuildHomebrewery script.

Vitreum is mostly a wrapper for Browserify, which is the bundler. It has some default settings baked in for Babel, and includes watchify and nodemon which are the "auto-restart/rebuild" tools. Then it kind of outputs it all into a string that launches the app on the client. That's basically it.

[calculuschild]

This is fixed in Vitreum now. Should appear next time we deploy something when it downloads the new version. See https://github.com/calculuschild/vitreum/pull/3