Generation of module federation doesn't work in dev mode

[padcom]

Versions

• originjs: 1.1.6
• node: 18.4.0

Reproduction

1. https://github.com/padcom/vite-module-federation-example
2. cd library
3. npm start (this will start the development server for the library)
4. cd ../host
5. npm start (this will start the development server for the host application)
6. navigate to http://localhost:5000

Please observe, there is no button on the page and there are errors in the console:

GET http://localhost:5001/assets/remoteEntry.js net::ERR_CONNECTION_REFUSED

What does work, however, is the following:

1. cd library
2. npm run build (this will the library)
3. npm run preview (this will host the library and all its generated assets)
4. cd ../host
5. npm start (this will start the development server for the host application)
6. navigate to http://localhost:5000

Please observe there is a "Click me!" button that when clicked will console.log a test message.

What is actually happening?

When retrieving the federated module from http://localhost:5001/assets/remoteEntry.js the dev server returns 404.

[paper-florent]

Same here the dev is just not working ... We can't expect to have people to have to npm run build and preview everytime they do a change... Is there no other solutions here ?

No matter If I am using https://github.com/originjs/vite-plugin-federation#the-remote-module-failed-to-load-the-share-of-the-local-module-for-examplelocalhost1-uncaught-in-promise-typeerror-failed-to-fetch-dynamically-imported-module-httplocalhost8080node_modulescachedirvuejsv4cd35ed0

Nothing make it work...

Personnally I tried with the vue2 example project.

i am using  ~/workdir/vite-app/ node -v v14.19.3  ~/workdir/vite-app/ npm -v 6.14.17

[AndreiSoroka]

Personnally I tried with the vue2 example project.

yes, with vue3 same problem

[AndreiSoroka]

https://github.com/originjs/vite-plugin-federation/issues/186#issuecomment-1124619289 from @ruleeeer

The dev mode has some restrictions. Only the complete host side (cannot contain any expose) can use the dev mode. This is because vite does not allow adding chunks in the dev mode and naturally cannot generate a remoteEntry.

[ygj6]

On the host side, you need to use vite build to generate a remoteEntry.js, since vite dev is unbundled. Of course you can use vite build --watch to keep it up to date!

[AndreiSoroka]

Yes, vite build --watch is solution. Thanks

[padcom]

Have you tried it out, guys? I mean vite build --watch and then to serve the project using vite serve --port <port>. I have tried it, it's in the repository and when something changes only part of the files get regenerated. In this particular case, styles are not loading.

[padcom]

Oh, and before anyone asks, the @padcom/vite-federation-plugin does nothing else than read values from package.json or if they are not present then to supply some defaults. Then the @originjs/vite-federation-plugin is called. Period. Nothing fancy here. I did it because I hate to have to remember everything when I start a new project. And this configuration will be in use all the time.

[paper-florent]

I don't if its totally impossible. But that would be a critical addition if you want to have a broadly usage of this in larger company.

We are actually evaluating webpack 5 and vite and so far we can't choose vite for those reasons...

[AndreiSoroka]

Have you tried it out, guys? I mean vite build --watch and then to serve the project using vite serve --port <port>

I tried. But I have global serve https://www.npmjs.com/package/serve and tried with it (not with vite serve --port <port>)

1 terminal

vite build --watch

2 terminal

serve -l 8083 ./dist

All was ok (with styles ok too). I don't think you have a server issue.

Or do you mean Hot Reload?

We are actually evaluating webpack 5 and vite and so far we can't choose vite for those reasons...

I agree with that opinion. Vite is interesting like touching new technology (maybe future technology), but not like production solutions (at the moment)

[padcom]

When you change something in the component in the library vite (in dev mode, of course) will automatically patch the implementation in-memory and re-instantiate all the instances of components downwards. It's called hot-reload (as opposed to cold-reload which is page reload).

So try booting it up again like you did, change something in HelloWorld2.vue and refresh the page. You'll see that styles for the changed component are gone.

..like so. That means that even just using vite build -w won't work beyond a demo.

[AndreiSoroka]

@padcom yes, you are right

working only with cold-reload :(

[padcom]

If just the build -w worked...

[oceangravity]

I think this feature is really needed <(＿　＿)>

[AntoinePollet]

build --watch does work with dev mode but isn't that a bit overkill ?

[xavier-villelegier]

Hey @padcom, did you find any workaround for this ? Or any alternative ? 🙏

This is indeed a blocker when trying to migrate a big codebase from Webpack to Vite… I personally ended up aliasing my remotes with alias config so that it still works in dev mode, but this breaks the purpose of module federation and exposing only what should be public for this module 😕

cc @ruleeeer, do you know if any major update is planned that would tackle this issue ? 👀

[darshkpatel]

Just pitching in to say, this has been a blocker for me too. Can't do any real development with the build --watch workaround.

@ruleeeer I would want to try to get this working if you can point me in the right direction

[ssuvorov]

August, 23. Still the same story.

[ecumene]

I admit this is messy.

Instead of using serve I used vite preview. I also added concurrently to run these two commands that the same time.

package.json

  "scripts": {
    "dev": "concurrently --kill-others \"yarn run build:watch\" \"yarn run preview\"",
    "build": "tsc && vite build",
    "build:watch": "tsc && vite build --watch",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview --port 5001 --strictPort"
  },

So yarn dev will expose http://127.0.0.1:5001/assets/remoteEntry.js just fine for me. Refreshes work too.

[vvnsrzn]

By the way, I found that the remoteEntry.js file isn't generated in assets folder, but in the dist folder.

[adirzoari]

facing the same issue , did you find a soltuion? @padcom @ssuvorov @oceangravity @AndreiSoroka @ecumene link to my issue: https://github.com/originjs/vite-plugin-federation/issues/576