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 { 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 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 ReactDOM from 'react-dom/client';
|
||||
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