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:
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|||||||
12
worklenz-frontend/src/utils/dnd-kit-wrapper.ts
Normal file
12
worklenz-frontend/src/utils/dnd-kit-wrapper.ts
Normal 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';
|
||||||
12
worklenz-frontend/src/utils/react-polyfill.ts
Normal file
12
worklenz-frontend/src/utils/react-polyfill.ts
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user