mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-28 00:06:53 +01:00
3acb3ad2c2
**Upgrade to React v18 for Unleash v6. Here's why I think it's a good time to do it:** - Command Bar project: We've begun work on the command bar project, and there's a fantastic library we want to use. However, it requires React v18 support. - Straightforward Upgrade: I took a look at the upgrade guide https://react.dev/blog/2022/03/08/react-18-upgrade-guide and it seems fairly straightforward. In fact, I was able to get React v18 running with minimal changes in just 10 minutes! - Dropping IE Support: React v18 no longer supports Internet Explorer (IE), which is no longer supported by Microsoft as of June 15, 2022. Upgrading to v18 in v6 would be a good way to align with this change. TS updates: * FC children has to be explicit: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc * forcing version 18 types in resolutions: https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/ Test updates: * fixing SWR issue that we have always had but it manifests more in new React (https://github.com/vercel/swr/issues/2373) --------- Co-authored-by: kwasniew <kwasniewski.mateusz@gmail.com>
79 lines
3.5 KiB
TypeScript
79 lines
3.5 KiB
TypeScript
import 'whatwg-fetch';
|
|
import 'themes/app.css';
|
|
import 'regenerator-runtime/runtime';
|
|
|
|
import ReactDOM from 'react-dom/client';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { QueryParamProvider } from 'use-query-params';
|
|
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
|
|
import { ThemeProvider } from 'themes/ThemeProvider';
|
|
import { App } from 'component/App';
|
|
import { ScrollTop } from 'component/common/ScrollTop/ScrollTop';
|
|
import { AccessProvider } from 'component/providers/AccessProvider/AccessProvider';
|
|
import { basePath } from 'utils/formatPath';
|
|
import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
|
|
import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
|
|
import { InstanceStatus } from 'component/common/InstanceStatus/InstanceStatus';
|
|
import { UIProviderContainer } from 'component/providers/UIProvider/UIProviderContainer';
|
|
import { StickyProvider } from 'component/common/Sticky/StickyProvider';
|
|
import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider';
|
|
import { PlausibleProvider } from 'component/providers/PlausibleProvider/PlausibleProvider';
|
|
import { Error as LayoutError } from './component/layout/Error/Error';
|
|
import { ErrorBoundary } from 'react-error-boundary';
|
|
import { useRecordUIErrorApi } from 'hooks/api/actions/useRecordUIErrorApi/useRecordUiErrorApi';
|
|
|
|
window.global ||= window;
|
|
|
|
const ApplicationRoot = () => {
|
|
const { recordUiError } = useRecordUIErrorApi();
|
|
|
|
const sendErrorToApi = async (
|
|
error: Error,
|
|
info: { componentStack: string },
|
|
) => {
|
|
try {
|
|
await recordUiError({
|
|
errorMessage: error.message,
|
|
errorStack: error.stack || '',
|
|
});
|
|
} catch (e) {
|
|
console.error('Unable to log error');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<UIProviderContainer>
|
|
<AccessProvider>
|
|
<BrowserRouter basename={basePath}>
|
|
<QueryParamProvider adapter={ReactRouter6Adapter}>
|
|
<ThemeProvider>
|
|
<AnnouncerProvider>
|
|
<ErrorBoundary
|
|
FallbackComponent={LayoutError}
|
|
onError={sendErrorToApi}
|
|
>
|
|
<PlausibleProvider>
|
|
<FeedbackProvider>
|
|
<FeedbackCESProvider>
|
|
<StickyProvider>
|
|
<InstanceStatus>
|
|
<ScrollTop />
|
|
<App />
|
|
</InstanceStatus>
|
|
</StickyProvider>
|
|
</FeedbackCESProvider>
|
|
</FeedbackProvider>
|
|
</PlausibleProvider>
|
|
</ErrorBoundary>
|
|
</AnnouncerProvider>
|
|
</ThemeProvider>
|
|
</QueryParamProvider>
|
|
</BrowserRouter>
|
|
</AccessProvider>
|
|
</UIProviderContainer>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('app')!);
|
|
root.render(<ApplicationRoot />);
|