I can't launch the basics of my app with the new React syntax.
I'm working again on a project from 3 years ago. Front based on React, AntD, Next, less...
The app is built in the following way : An app container that will host other components : navigation, menu, content. When I switch from a page to another, I only change the content, so I don't have to reload everything.
The project was based on node 12, antd4 and react16. I updated everything to last version (Node 20, AntD 5, React 18. I expected malfunctionning, which I'm solving little by little.
I realized that the main rendering method changed from React 16 to 18, and I couldn't find anywhere how to achieve what I need.
Here is the (working) code from before :
import React from "react"
import ReactDOM from "react-dom"
import NextApp from "./NextApp"
import { AppContainer } from "react-hot-loader"
// Wrap the rendering in a function:
const render = (Component) => {
ReactDOM.render(
// Wrap App inside AppContainer
<AppContainer>
<Component />
</AppContainer>,
document.getElementById("root")
)
}
// Render once
render(NextApp)
// Webpack Hot Module Replacement API
if (module.hot) {
module.hot.accept("./NextApp", () => {
render(NextApp)
})
}
This was working perf, and the router was doing the job by providing the right "Component" (the content)
Now, from what I understood, the new syntax is :
import React from "react"
import { createRoot } from 'react-dom/client';
import NextApp from "./NextApp"
import { AppContainer } from "react-hot-loader"
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<AppContainer>
<Component />
</AppContainer>
)
My problem : it doesn't work at all because Component is not defined anywhere. It's not an actual component, as you might have understood from first piece of code.
How could I achieve that with new React syntax ? (found nothing in their doc)
When I start the app with 2nd code, It starts well but can't display anything. I have nothing in terminal logs but browser logs say "dunno what Component iz bro, pliz tell".
Any help or boiler would be oh how much appreciated. Last solution I have is just to start a new app from scratch and re-develop everything with new versions syntax.
Love
It was definitely an issue with multi-dependencies not liking each other. Several major updates on Node, React, Express, Theming, and others... Too many syntax changes, so even if I fix one thing (React root init, here) I shouldn't expect the rest to work straight forward. Extract the logic and build with a new consistent and smaller stack did the trick for me. Thanks !