From React + Next to new React : initialize an app with <container><component/></container>

Question

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

Answer 1

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 !