Import Module Federation File with Yarn Workspace

[LechLee]

Hi, is it possible to import the remoteEntry.js file using Yarn Workspace Concept

I made a sample at https://github.com/LechLee/mf-monorepo-wepback5-vue by converting it from https://github.com/jherr/mf-dog-site

The project contains two app,

1. dog-detail
2. home (the host)

I made some changes to import the remote file using yarn workspace at https://github.com/LechLee/mf-monorepo-wepback5-vue/tree/module-federation-without-host

Here is a simple explanation on what i did:

1. Build the dog-detail app to create remoteEntry.js at dist folder
2. Import a Carousel component from remoteEntry.js at home app by import { Carousel } from 'dog-detail/dist/remoteEntry; at home app's App.vue

The Yarn Workspace Packages Folder:

packages

• dog-detail
• home

dog-detail's webpack.config.js:

module.exports = {	
	plugins: [
		new ModuleFederationPlugin({
			name: 'dogDetail',
			filename: 'remoteEntry.js',		
			exposes: {
				'./Carousel': './src/Carousel.vue',
			}
		}),
	],
}

home app's App.vue:

<template>
<div class="container">
  <Carousel />
</div>
</template>

<script>
import Header from './Header.vue';
import { Carousel } from 'dog-detail/dist/remoteEntry';

export default {
  components: {
    Header,
    Carousel,
  }
}
</script>

However, i'm facing runtime error of Uncaught (in promise) ReferenceError: webpack_require is not defined

[alexander-akait]

Yes, you can use PnP and module federation, but I don't understand you, sorry your questions is not readable

[LechLee]

Hi @alexander-akait, i have updated the question with same code from a repo. Do hope it clears the confusion.

i tried to run

import { Carousel } from 'dog-detail/dist/remoteEntry';

But i'm facing an error of

[alexander-akait]

Something wrong with your code or configuration

[LechLee]

Hi @alexander-akait, can assist me at https://github.com/LechLee/mf-monorepo-wepback5-vue/tree/module-federation-without-host

?

[sokra]

No you can't import the remote entry. Instead import something like dog-detail/Carousel and you need to add the ModuleFederationPlugin to that repo with remotes: { "dog-detail": "..." }

[LechLee]

Hi @sokra,
i have already done that at https://github.com/LechLee/mf-monorepo-wepback5-vue master branch
I'm exploring the possibility to achieve this without running multiple dev server during runtime as this would eat up quite a lot of processing power and memory for development purposes