external_"app2":1 Uncaught (in promise) ScriptExternalLoadError: Loading script failed.

[xileliu]

"webpack": "5.0.0-beta.23":

app1:

Error：

[ScriptedAlchemy]

try with this syntax, or you might need to use library: {type: 'var'}
https://github.com/module-federation/module-federation-examples/blob/master/bi-directional/app1/webpack.config.js#L32

[Mustang-Galaxy]

@ScriptedAlchemy### library: {type: 'umd'}

[neove]

i have same problem, how about now
？

[erickbelfy]

I'm having the same issue, here is my configuration set

remote 1
{
      name: 'platformSignup',
      filename: 'remoteEntry.js',
      library: { type: 'var', name: 'platformSignup' },
      exposes: {
        './Signup': './src/App'
      },
      remotes: {},
      shared: {
        ...pkg.dependencies,
        react: {
          singleton: true,
          requiredVersion: pkg.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: pkg['react-dom'],
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: pkg['react-router-dom'],
        },
      }
    }

remote2
{
      name: 'platformPlans',
      filename: 'remoteEntry.js',
      library: { type: 'var', name: 'platformPlans' },
      exposes: {
        './Plans': './src/App.tsx'
      },
      shared: {
        ...pkg.dependencies,
        react: {
          singleton: true,
          requiredVersion: pkg.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: pkg['react-dom'],
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: pkg['react-router-dom'],
        },
      }
    }

host remote
{
      name: 'platformOrchestrator',
      remotes: {
        platformSignup: 'platformSignup@http://localhost:3007/remoteEntry.js',
        platformPlans: 'platformPlans@http://localhost:3008/remoteEntry.js',
      },
      shared: pkg.dependencies
}

The component configuration is correct, export default components but I still have this issue ScriptExternalLoadError

Uncaught ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:3008/remoteEntry.js)
while loading "./Plans" from webpack/container/reference/platformPlans
    at Object.webpack/container/reference/platformPlans

[ScriptedAlchemy]

Public path isn't set to auto or an absolute url

[viviScript]

project vue_components
module.exports = {
// 唯一ID，用于标记当前服务
name: "vue_components",
// 提供给其他服务加载的文件
filename: 'remoteEntry.js',
library: { type: 'var', name: 'vue_components' },
// 需要暴露的模块，使用时通过 ${name}/${expose} 引入
exposes: {
// 别名:组件的路径
// './components': './src/components/Home.vue',
// ...
'./CfCard': './src/components/CfCard/index.vue',
'./Demo': './src/components/demo.vue'
},
remotes: {

},
shared: ['vue/dist/vue.esm.js'],
}

project jcj_front
// 微前端配置
module.exports = {
// 唯一ID，用于标记当前服务
name: "jcj_front",
// 提供给其他服务加载的文件
filename: 'jcj_front.js',
// 需要暴露的模块，使用时通过 ${name}/${expose} 引入
exposes: {
// 别名:组件的路径
// './components': './src/components/Home.vue',
// ...
},
remotes: {
// 远程项目别名:远程引入的项目名
'vue_components': 'vue_components@http://localhost:8080/remoteEntry.js',
},
shared: ['vue/dist/vue.esm.js'],
}

[zergeborg]

@ScriptedAlchemy
I also face this exact issue, and even if my publicPath is set to auto or an absolute URL, the result is the same: Loading script failed. Since so many people have this issue, this might actually a be a bug after all?

There is also an open issue which reports this exact problem here: #1273

And the same issue had been reported here: #957 and here: #692 as well.

I don't know how the code works, but can this warning be more elaborate to tell what exactly failed and what is the solution to fix it? If it is caused by the publicPath indeed, then maybe the warning should also report the location of misconfiguration and the incorrect value?

One thing which is not always clear in these bug reports to me, if people do the remote module loading manually, or through a 3rd party library. In case of angular for example @angular-architects/module-federation can load the remote modules.

That might be a culprit too.

[zergeborg]

Some further note: as suspected, this error has nothing to do with publicPath. library: {type: 'umd'} worked well in my case.

[enurv]

I still have the same error even though I used output: {publicPath: 'auto'} . Here is my configs;

remote app

module.exports = {
  optimization: {
    runtimeChunk: false
  },
  output: {
    publicPath: 'auto',
  },      
  plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      filename: "remoteEntry.js",  
      exposes: {
        './FirstModule': './src/app/first/first.module.ts',
      },    
      shared: {
        "@angular/core/": { singleton: true, eager: true },   //trailing slash at the end of the packages is important for
        "@angular/common/": { singleton: true, eager: true }, // "Shared module is not available for eager consumption" error
        "@angular/router/": { singleton: true, eager: true },                                                             
      }
    }),
  ],
};

host app

module.exports = {
  optimization: {
    runtimeChunk: false
  },
  output: {
    publicPath: 'auto',
  },       
  plugins: [
    new ModuleFederationPlugin({
        
      remotes: {
          "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
      },

      shared: {
        "@angular/core/": { singleton: true, strictVersion: true, eager: true },
        "@angular/common/": { singleton: true, strictVersion: true, eager: true },
        "@angular/router/": { singleton: true, strictVersion: true, eager: true },
      }

    }),
  ],
};

[lzxb]

I also encountered this problem. Has anyone solved it

[lzr900515]

if your use the vue-cli make sure to config :
chainWebpack: (config) => {
config.output.publicPath = 'auto'
}
and then this problem solved and have a new problem....ChunkLoadError: Loading chunk src_components_layouts_SubSidebar_vue failed.

[lzr900515]

ChunkLoadError: Loading chunk

and set:
optimization: {
runtimeChunk: false,
},

[ScriptedAlchemy]

Yeah a single runtime chunk causes issues. Or you neee to use the runtime option under module federation plugin