Uncaught Error: Invalid hook call

[Relaxe111]

When i changed react hmr plugin from plugin-react to plugin-react-swc on my existing project I get following error at first hook it reach:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

my code:

//AppIndex.tsx
export const App = async () => {
    await clearCacheData()
    /**
     * TODO: Need to investage possibility to differentiate initiatieIDBListenersOnMstSnaphsots on micro app level
     */
    await initiatieIDBListenersOnMstSnaphsots(main_store)

    await initiatieIDBListenersOnMstSnaphsots({ auth$ })

    //auth$.customer.setSrvUrlsGlobalyOnWindow()

    auth$.is_authenticated && (await getJwtTokenAsync())

    return (
        <AtuhStoreProvider store={auth$}>
            <StoreProvider store={main_store}>
                <AppIdx />
            </StoreProvider>
        </AtuhStoreProvider>
    )
}

//AppIdx.tsx
const App = observer(() => {
    const auth$ = useAuth$() //**_here error happens_**

    useEffect(() => {
        const root = document.body

        if (isAdcuris()) {
            root.dataset['theme'] = 'adcuris'
        }
    }, [])
    !auth$.is_authenticated && !isEprLoginUrl() && redirect('/')

    auth$.is_authenticated && redirect('/portal/overview')

    return (
        <CustomRouter history={history}>
            <>{(auth$.is_authenticated && <ProtectedRoutes />) || <UnprotectedRoutesRoutes />}</>
        </CustomRouter>
    )
})

export default App

Is there a bug?

[Relaxe111]

I have updated my project to vite4

[ArnaudBarre]

React render can't be async. I'm surprised you didn't get issues with that before. Where does observer comes from? I can't help you without a complete reproduction