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

[lzr900515]

Yeah a single runtime chunk causes issues. Or you neee to use the runtime option under module federation plugin
when i set the filename and chunkFilename to dir js/, why will get a Error: ChunkLoadError: Loading chunk.
output: {
filename: 'js/[name].js',
publicPath: '/',
chunkFilename: 'js/[name].js'
}
remove the config will goes well。 use webpack to build the module federation component chunk can find in the file 'dist/js/src_components_layouts_SubSidebar_vue.js'. when use webpack-dev-serve , the http://localhost:8081/js/src_components_layouts_SubSidebar_vue.js got the http code 404.

[beyond-yang]

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'], }

你好，请问这个问题解决了吗，我也遇到了同样的问题还没解决

[AndreiSoroka]

@beyond-yang fix here vuejs/vue-cli#7005

example:
https://github.com/module-federation/module-federation-examples/tree/master/vue3-cli-demo

[scottMan1001]

chainWebpack: (config) => {
config.output.publicPath = 'auto'
}

could you give the full config to resovle this issue? Thanks

[scottMan1001]

chainWebp

hi,bro . did this issue fixed? and how to fix

[fcano-ut]

Here's a repo to reproduce this issue, the Microfrontend doesn't load. I think I tried pretty much everything mentioned here.
https://github.com/fcano-ut/single-spa-test/tree/f9224790b50cdac220aa060da7154de4604e25a3
(Notice I locked the URL at a specific commit because I might try using System.js now, because I was trying to reproduce another bug in another library).

[AzronChan]

when i set
optimization: { splitChunks: false }
it's find.but i need splitChunk and MF,i don't known how to do....

[xuebigshuai]

when i set optimization: { splitChunks: false } it's find.but i need splitChunk adn MF,i don't known how to do....

in prod set splitChunks = true . in dev set splitChunks = false. is oK?

[ScriptedAlchemy]

Set it to undefined and then webpack will do default.

[manu-058]

Any update on this issue??

[ScriptedAlchemy]

Try using module-federation/enhanced - we fixed chunk split issues there

[Ahuzsp]

我的vue项目，自己尝试的时候发现一般有以下几个原因
1.没有配置publicPath
2.没有加optimization: { splitChunks: false }
3.模块联邦没有配置 library: { type: 'umd', name: 'xxx' }

呃，感觉限制还挺多的....