Module federation works with "quasar dev" but not with "quasar build" or "quasar serve" #16452

goldyfruit · 2023-10-11T12:49:34Z

goldyfruit
Oct 11, 2023

Hi,

I followed the example for Quasar and Vue 3 but I got a very strange issue. Everything works fine if I run quasar dev on the host and the remote but when I run quasar build on the host and the remote I got this error:

If I run quasar build on the host and quasar dev on the remote, everything work so I guess this is related to something I missed on the remote configuration.

      // Host configuration
      extendWebpack(cfg) {
        cfg.entry = path.resolve(__dirname, './.quasar/main.js');
        cfg.plugins.push(
          new ModuleFederationPlugin({
            name: 'app_general',
            filename: 'remoteEntry.js',
            remotes: {},
            exposes: {},
            shared: {
              ...dependencies,
            },
          })
        );
      },

      // Remote configuration
      extendWebpack(cfg) {
        cfg.entry = path.resolve(__dirname, './.quasar/main.js');
        cfg.plugins.push(
          new ModuleFederationPlugin({
            name: 'app_expose',
            filename: 'remoteEntry.js',
            exposes: {
              './RemoteSkill.vue': './src/components/RemoteSkillComponent.vue',
            },
            shared: {
              ...dependencies,
            },
          })
        );

Here is the file with the "syntax error" 140.c3d0a1b4.js:

<!DOCTYPE html>
<html>
  <head>
    <title>Quasar App</title>
    <meta charset=utf-8>
    <meta name=description content="A Quasar Project">
    <meta name=format-detection content="telephone=no">
    <meta name=msapplication-tap-highlight content=no>
    <meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
    <link rel=icon type=image/png sizes=128x128 href=icons/favicon-128x128.png>
    <link rel=icon type=image/png sizes=96x96 href=icons/favicon-96x96.png>
    <link rel=icon type=image/png sizes=32x32 href=icons/favicon-32x32.png>
    <link rel=icon type=image/png sizes=16x16 href=icons/favicon-16x16.png>
    <link rel=icon type=image/ico href=favicon.ico>
    <script defer src=js/main.c57f4dd9.js></script>
  </head>
  <body>
    <div id=q-app></div>
  </body>
</html>

I think I should not have HTML but Javascript in this file (I'm pretty new with all of these).

This is the procedure I followed to work with Quasar, Webpack and the module federation https://github.com/module-federation/module-federation-examples/tree/master/quasar-cli-vue3-webpack-javascript

I tried with singleton and eager but same behaviour.

Thanks for your help.

SkyWalker653 · 2024-09-22T08:09:56Z

SkyWalker653
Sep 22, 2024

The problem occurs because the public path is not set correctly during the project build. To fix this, add the following code to the build section of your quasar.config.js file:

chainWebpack(chain) {
        chain.output
          .publicPath('http://localhost:8080/')
        chain.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);

        chain.optimization.delete('splitChunks');
      }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module federation works with "quasar dev" but not with "quasar build" or "quasar serve" #16452

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Module federation works with "quasar dev" but not with "quasar build" or "quasar serve" #16452

goldyfruit Oct 11, 2023

Replies: 1 comment

SkyWalker653 Sep 22, 2024

goldyfruit
Oct 11, 2023

SkyWalker653
Sep 22, 2024