System is not defined

[akagamina]

Hi,

I'm trying to use with vue 2 webpack and vue-3 vite js. but after all, the settings is done vite gaves System is not defined error. This is my code.

Vue-2 + Webpack 5

  new ModuleFederationPlugin({
        name: 'core',
        filename: 'remoteEntry.js',
        library: { type: 'system' },
        exposes: {
            './sidebar': './src/layout/Sidebar.vue',
        },
        shared: ['vue'],
    }),

Vue-3 + Vite

in Vue 3 + Vite project I define the component this way

const sidebar = defineAsyncComponent(() => import("core/sidebar"));
app.component("sidebar", sidebar);

 plugins: [
            Vue({
                include: [/\.vue$/, /\.md$/],
            }),
            Pages(),
            Layouts(),
            federation({
                name: "new-lookup",
                filename: "remoteEntry.js",
                remotes: {
                    core: "http://localhost:3030/remoteEntry.js"
                },
            }),
        ],

and error is:

remoteEntry.js:9 Uncaught (in promise) ReferenceError: System is not defined at remoteEntry.js:9

line 9:

System.register([], function(__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {....

Thanks for help

[ruleeeer]

I think it might be caused by not import systemjs in index.html,try to do like this in the index.html

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

or you can refer index.html

[ruleeeer]

something else, i think shared vue is not suit at vue2 and vue3,because there is a big different in vue2 and vue3

[ruleeeer]

I forgot one more thing, webpack 3 now supports federation?

[akagamina]

Webpack 3 doesn't support module federation.

I’ll try to import system js

I’m using Webpack 5 not 3

[akagamina]

Hi again,

I tried to import System both projects but this error appears again.

Uncaught (in promise) TypeError: remote.init is not a function

[ruleeeer]

Ok, let's start from the beginning

1. please upgrade to the latest version, I have released 1.0.7 and added var fromat support for webpack
2. first make sure the remote address is accessible? Just like https://localhost:port/remoteEntry.js
3. if it is accessible, please send me a screenshot of the beginning of the remoteEntry.js file, or send me the remote information in the debug message in remote.init to help me locate the problem please

[akagamina]

The error has been changed. The new error is;

TypeError: lib.init is not a function
    at __x00__virtual:__federation__:41

iimport { injectQuery as __vite__injectQuery } from "/@vite/client";
const remotesMap = {
  'core':{url:'http://localhost:3030/remoteEntry.js',format:'var'}
};
const loadJS = (url, fn) => {
  const script = document.createElement('script')
  script.type = 'text/javascript';
  script.onload = fn;
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}
const scriptTypes = ['var'];
const importTypes = ['esm', 'systemjs']
const webpackGet = name => import(__vite__injectQuery(name, 'import')).then(module => ()=>module?.default ?? module)
const shareScope = {
  'vue':{'3.2.20':{metaGet: ()=> import(/* @vite-ignore */ 'http://localhost:3000/node_modules/.vite/vue.js?v=b52d3d3a'),loaded:1,get:()=> webpackGet('http://localhost:3000/node_modules/.vite/vue.js?v=b52d3d3a')}},'vuex':{'4.0.2':{metaGet: ()=> import(/* @vite-ignore */ 'http://localhost:3000/node_modules/.vite/vuex.js?v=b52d3d3a'),loaded:1,get:()=> webpackGet('http://localhost:3000/node_modules/.vite/vuex.js?v=b52d3d3a')}}
};
const initMap = Object.create(null);
export default {
  ensure: async (remoteId) => {
    const remote = remotesMap[remoteId];
    if (!remote.inited) {
      if (scriptTypes.includes(remote.format)) {
        // loading js with script tag
        return new Promise(resolve => {
          const callback = () => {
            if (!remote.inited) {
              remote.lib = window[remoteId];
              remote.lib.init(shareScope) // this fields gives error
              remote.inited = true;
            }
            resolve(remote.lib);
          }
          loadJS(remote.url, callback);
        });
      } else if (importTypes.includes(remote.format)) {
        // loading js with import(...)
        return new Promise(resolve => {
          import(__vite__injectQuery(remote.url, 'import')).then(lib => {
            if (!remote.inited) {
              lib.init(shareScope);
              remote.lib = lib;
              remote.lib.init(shareScope);
              remote.inited = true;
            }
            resolve(remote.lib);
          })
        })
      }
    } else {
      return remote.lib;
    }
  }
};

And also this is my remoteEntry file: https://www.file.io/download/K5FJ5ftkrjmI

[willsza]

@ruleeeer
Could you please explain the solution to the above problem?