SolidJS•2y ago

Module Federation inside a Monorepo

I have a Monorepo with multiple Solid Projects. I want to host some components inside one of them to use them in another. The motivation for this is, that the deployment for one of the projects is quite a long process. So I just want to import a "tab" component and be able to edit it remotely.

1 Reply

OstofOP•2y ago

the remote app

federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: { ScheduleComponent: './src/ui/schedule_tab' },
      shared: ['solid-js'],
    })

federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: { ScheduleComponent: './src/ui/schedule_tab' },
      shared: ['solid-js'],
    })

the client

federation({
      name: 'app',
      remotes: {
        remoteApp: 'http://127.0.0.1:5001/assets/remoteEntry.js',
      },
      shared: ['solid-js'],
    }),

federation({
      name: 'app',
      remotes: {
        remoteApp: 'http://127.0.0.1:5001/assets/remoteEntry.js',
      },
      shared: ['solid-js'],
    }),

const ScheduleComponent = lazy(() => import('remoteApp/schedule_tab'))

But I get this error

remoteEntry.js:1 Uncaught (in promise) TypeError: l[e] is not a function
    at Module.u (remoteEntry.js:1:741)
    at __x00__virtual:__federation__:81:73

remoteEntry.js:1 Uncaught (in promise) TypeError: l[e] is not a function
    at Module.u (remoteEntry.js:1:741)
    at __x00__virtual:__federation__:81:73

The remote component

const ScheduleComponent: Component = () => {
  return (
    <div>
      <p>ScheduleComponent TEST</p>
    </div>
  )
}

export default ScheduleComponent

const ScheduleComponent: Component = () => {
  return (
    <div>
      <p>ScheduleComponent TEST</p>
    </div>
  )
}

export default ScheduleComponent

Gaming

Programming

Module Federation inside a Monorepo