Vue.js implementation?
eladcandroid opened this issue · 7 comments
+1
There is a vue example in the example projects
In this example, if I add Vite environment variables to the remote project and read them with "import.meta.env.VARIABLE_NAME", it works perfectly during development. However, if I build the project, it fails because it can't find the environment variables. On the other hand, if I use the same variables locally, it works fine. Perhaps there is another configuration that needs to be added?
Here a example with the error: https://github.com/ferblancodosil/vite-module-federation
If you build and deploy in a nginx will show the error:
@ferblancodosil did you find a solution for that?
The problem lies in es-module-shim as it clashes with the import.meta API of the browser and the vite import.meta. I have two possible solutions in this repository (https://github.com/ferblancodosil/vite-module-federation). The first one is a plugin that runs in the first phase of the build, before generating the dist files. It generates the environment.ts file that other files will read from.
The second option is a process that will be called after building from the package.json file to transform the content of all .js files. This process looks for import.meta.env.VARIABLE and transforms it into the required value.
@ferblancodosil Thanks for sharing.
I prefer the first approach because it's simpler but clever. 💪
Would you like to create a PR in the official examples?
https://github.com/module-federation/module-federation-examples/tree/master/vite-vue-microfrontends
You can do the same with the React and Svelte examples because it's a framework agnostic way.
https://github.com/module-federation/module-federation-examples/tree/master/vite-react-microfrontends
https://github.com/module-federation/module-federation-examples/tree/master/vite-svelte-microfrontends
Here is a repo with Vue + env variables https://github.com/gioboa/vue-microfrontend-demo