Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
goldyfruit opened this issue Oct 10, 2023 · 4 comments
Open

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

goldyfruit opened this issue Oct 10, 2023 · 4 comments

Comments

@goldyfruit
Copy link

goldyfruit commented Oct 10, 2023 •
edited

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:

image

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.
@goldyfruit goldyfruit changed the title Works with "quasar dev" but not with "quasar build" served by Nginx #5 Works with "quasar dev" but not with "quasar build or quasar serve" Oct 10, 2023
@goldyfruit goldyfruit changed the title Works with "quasar dev" but not with "quasar build or quasar serve" Module federation works with "quasar dev" but not with "quasar build" or "quasar serve" Oct 11, 2023
@goldyfruit goldyfruit reopened this Oct 11, 2023
@goldyfruit
Copy link
Author

goldyfruit commented Oct 11, 2023 •
edited

In remoteEntry.js I got this Module "' + e + '" does not exist in container. and this Container initialization failed as it has already been initialized with a different share scope which I guess I got because of Unexpected token '<' (at 140.c3d0a1b4.js:1:1).

@goldyfruit
Copy link
Author

I tested the https://github.com/module-federation/module-federation-examples/tree/master/quasar-cli-vue3-webpack-javascript as well and I got the same behaviour, everything works with quasar dev but not with quasar build.

image

@goldyfruit
Copy link
Author

Any help on this will be really appreciated.

@lexasq lexasq mentioned this issue Oct 24, 2023
Merged
@ScriptedAlchemy
Copy link
Member

set output.publicPath: auto

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@goldyfruit @ScriptedAlchemy