feat(react-integration): add React polyfills and ensure global availability

- Introduced a React polyfill to prevent undefined errors in dependencies by making React globally available in both window and globalThis.
- Updated the App component to allow optional children prop for improved flexibility.
- Created a new dnd-kit-wrapper utility to ensure React is available globally before importing @dnd-kit utilities.
This commit is contained in:
chamiakJ
2025-06-03 11:05:37 +05:30
parent 5ec7a2741c
commit 3bfb886de7
4 changed files with 28 additions and 1 deletions

View File

@@ -21,7 +21,7 @@ import { Language } from './features/i18n/localesSlice';
import logger from './utils/errorLogger'; import logger from './utils/errorLogger';
import { SuspenseFallback } from './components/suspense-fallback/suspense-fallback'; import { SuspenseFallback } from './components/suspense-fallback/suspense-fallback';
const App: React.FC<{ children: React.ReactNode }> = ({ children }) => { const App: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
const themeMode = useAppSelector(state => state.themeReducer.mode); const themeMode = useAppSelector(state => state.themeReducer.mode);
const language = useAppSelector(state => state.localesReducer.lng); const language = useAppSelector(state => state.localesReducer.lng);

View File

@@ -1,3 +1,6 @@
// Import React polyfill first to ensure React is available globally
import './utils/react-polyfill';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';

View File

@@ -0,0 +1,12 @@
import React from 'react';
// Ensure React is available globally before any @dnd-kit imports
if (typeof globalThis !== 'undefined') {
(globalThis as any).React = React;
}
// Re-export @dnd-kit utilities with React dependency assured
export * from '@dnd-kit/core';
export * from '@dnd-kit/sortable';
export * from '@dnd-kit/modifiers';
export * from '@dnd-kit/utilities';

View File

@@ -0,0 +1,12 @@
import React from 'react';
// Polyfill React hooks globally to prevent undefined errors in dependencies
if (typeof window !== 'undefined') {
// Ensure React is available globally
(window as any).React = React;
}
// Also ensure it's available in globalThis for ES modules
if (typeof globalThis !== 'undefined') {
(globalThis as any).React = React;
}