Navigating Webpack Module Federation: Managing React 17 and React 18 Integration

jeancatarina — Fri, 08 Dec 2023 17:24:57 +0000

Today's fast-paced tech realm presents challenges with different React versions coexisting in one environment. This article explores integrating React 17 and React 18 within Webpack Module Federation, ensuring a seamless partnership.

The interaction between React 17 (father app) and React 18 (child app) faces inherent challenges due to their distinct virtualized DOMs. Rendering both together can spark version conflicts, demanding a thoughtful strategy for integration.

Setting Up the Father App (React 17)

In the father app, we face the challenge of incorporating a child app built with React 18 while maintaining isolation. To address this, we create a designated <div> within the father app where the React 18 child will render, avoiding conflicts with the React 17 DOM structure.



// Father App (React 17)
const componentCleanup = useCallback(() => {
  unmount()
}, [remotes.name])

useEffect(() => {
  mount({
    idParent: "children_app"
  })

  window.addEventListener('beforeunload', componentCleanup)

  return () => {
    componentCleanup()
    window.removeEventListener('beforeunload', componentCleanup)
  }
}, [componentCleanup])

<div id="children_app" />

Child App (React 18) Integration

The child app, developed with React 18, employs a mount controller to handle the rendering process within the specified <div> of the father app. This ensures the creation of an isolated instance of React 18, mitigating version conflicts.



import { createRoot } from 'react-dom/client'

import App from './App/appMain/AppMain'

window.childapp_ready = false
const RootCache = new Map()

function handleRecoverableError(error) {
  console.error('CHILD-APP ERROR:', error)
}

function mount({ idParent }) {
  if (window.childapp_ready) return

  const container = document.getElementById(idParent)

  const root = createRoot(container, {
    onRecoverableError: handleRecoverableError
  })

  root.render(<App />)

  window.childapp_ready = true

  RootCache.set(idParent, root)

  return root
}

function unmount({ idParent }) {
  RootCache.get(idParent)?.unmount()
  window.childapp_ready = false
}

export default { mount, unmount }

Webpack Configuration for Child App

The webpack configuration for the child app ensures proper sharing and handling of React versions within the Webpack Module Federation setup:



module.exports = {
  name: 'childapp',
  path: 'build-child',
  port: 3333,
  openBrowser: false,
  remotes: [],
  exposes: [
    {
      componentName: 'App',
      componentPath: './src/App/appMain/AppMain.tsx'
    },
    {
      componentName: 'Mount',
      componentPath: './src/mountApp.js'
    }
  ],
  shared: {
    react: {
      requiredVersion: '*',
      import: 'react',
      shareKey: 'react',
      shareScope: 'default',
      singleton: false
    },
    'react-dom': {
      requiredVersion: dependencies['react-dom'],
      singleton: true
    }
  }
}

Managing React 18 Isolation

By leveraging this structured approach, invoking the mount function within the father app ensures an encapsulated instance of React 18 is rendered within the designated <div>. This segregation prevents interference between the React 17 and React 18 instances, promoting a conflict-free environment.

Now we can see that we have two reacts working in the same page!

Closing Thoughts

Managing the integration of disparate React versions demands meticulous planning and implementation. Utilizing Webpack Module Federation provides a strategic avenue to ensure the coexistence of React 17 and React 18 without version conflicts.

example github project: https://github.com/module-federation/module-federation-examples/tree/master/different-react-versions-isolated

Feel free to connect with me on LinkedIn for further discussions and insights into React version integration using Webpack Module Federation.

'DISABLE_ESLINT_PLUGIN' is not recognized as an internal or external command

jeancatarina — Fri, 11 Nov 2022 12:45:15 +0000

Errors:

'DISABLE_ESLINT_PLUGIN' is not recognized as an internal or external command 'SKIP_PREFLIGHT_CHECK' is not recognized as an internal or external command

Solution:
Use cross-env. Example:
cross-env DISABLE_ESLINT_PLUGIN=true SKIP_PREFLIGHT_CHECK=true

fatal: cannot run .husky/pre-commit: No such file or directory

jeancatarina — Tue, 26 Oct 2021 19:12:42 +0000

Error:

fatal: cannot run .husky No such file or directory

Best Solution

copy the content of the file (pre-commit)
delete the file with error (pre-commit)
npx husky add ./.husky/pre-commit
open the file and paste the content
now will work

Another solutions

1- rm -rf node_modules && rm -rf yarn.lock && yarn install
2- chmod +x ./.husky/*
3- rm -rf .git/hooks/pre-commit

Error: Unrecognized font family Material Design icons

jeancatarina — Thu, 26 Nov 2020 13:24:56 +0000

Solution:

Podfile:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

info.plist

<key>UIAppFonts</key>
<array>
    <string>FontAwesome.ttf</string> 
    <string>MaterialIcons.ttf</string> 
    <string>MaterialCommunityIcons.ttf</string> 

    <string>your custom fonts</string>
</array>

react-native unlink react-native-vector-icons
npm uninstall react-native-vector-icons
react-native install react-native-vector-icons

cd ios && pod install && pod update
npm i
yarn ios

DEV Community: jeancatarina