How does Module Federation work with React, Vue, Angular, and other frameworks?

Module Federation can be used with various front-end frameworks. Here are specific implementation solutions for each framework:

1. React + Module Federation

Basic Configuration:

javascript
// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  // ...other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'reactApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
        './Header': './src/Header'
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true }
      }
    })
  ]
}

Using Remote Components:

javascript
import React, { Suspense } from 'react'

const RemoteButton = React.lazy(() => import('remoteApp/Button'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RemoteButton label="Click me" />
    </Suspense>
  )
}

2. Vue 3 + Module Federation

Basic Configuration:

javascript
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'vueApp',
        filename: 'remoteEntry.js',
        exposes: {
          './Button': './src/components/Button.vue'
        },
        shared: {
          vue: { singleton: true, eager: true }
        }
      })
    ]
  }
})

Using Remote Components:

javascript
<template>
  <div>
    <Suspense>
      <template #default>
        <RemoteButton :text="buttonText" />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    RemoteButton: defineAsyncComponent(() => 
      import('remoteApp/Button')
    )
  },
  data() {
    return {
      buttonText: 'Click me'
    }
  }
}
</script>

3. Angular + Module Federation

Basic Configuration:

javascript
// webpack.config.js
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'angularApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ButtonComponent': './src/app/button/button.component.ts'
      },
      shared: {
        '@angular/core': { singleton: true },
        '@angular/common': { singleton: true }
      }
    })
  ]
}

Using Remote Components:

typescript
import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

@Component({
  selector: 'app-root',
  template: `
    <ng-container *ngIf="remoteButton">
      <ng-container *ngComponentOutlet="remoteButton"></ng-container>
    </ng-container>
  `
})
export class AppComponent {
  remoteButton: any

  async ngOnInit() {
    const module = await import('remoteApp/ButtonComponent')
    this.remoteButton = module.ButtonComponent
  }
}

4. Svelte + Module Federation

Basic Configuration:

javascript
// rollup.config.js
import moduleFederation from '@module-federation/rollup-plugin'

export default {
  plugins: [
    moduleFederation({
      name: 'svelteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.svelte'
      },
      shared: {
        svelte: { singleton: true }
      }
    })
  ]
}

Using Remote Components:

javascript
<script>
  import { onMount } from 'svelte'

  let RemoteButton

  onMount(async () => {
    const module = await import('remoteApp/Button')
    RemoteButton = module.default
  })
</script>

{#if RemoteButton}
  <svelte:component this={RemoteButton} text="Click me" />
{/if}

5. Cross-Framework Interoperability

React Using Vue Components:

javascript
import React from 'react'

const VueComponentWrapper = React.lazy(() => 
  import('vueApp/Button')
)

function ReactApp() {
  return (
    <Suspense fallback={<div>Loading Vue component...</div>}>
      <VueComponentWrapper />
    </Suspense>
  )
}

Vue Using React Components:

javascript
<template>
  <div>
    <ReactComponentWrapper />
  </div>
</template>

<script>
import { defineAsyncComponent, onMounted } from 'vue'

export default {
  components: {
    ReactComponentWrapper: defineAsyncComponent(() => 
      import('reactApp/Button')
    )
  }
}
</script>

Best Practices:

1. Unify dependency versions: Ensure all applications use the same version of shared dependencies
2. Type safety: Use TypeScript or type declaration files to ensure type safety
3. Error handling: Add error boundaries and fallback strategies for remote components
4. Performance optimization: Use lazy loading and code splitting to optimize performance
5. Style isolation: Use CSS Modules or CSS-in-JS to avoid style conflicts

With these configurations, Module Federation can seamlessly integrate with various front-end frameworks, enabling cross-framework module sharing.