Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.

[Ge-yuan-jun]

webpack version: 5.20.0

error message

warining: Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
error: Uncaught (in promise) ScriptExternalLoadError: Loading script failed.

similar issue: (#307)

I already used syntax like app2: "app2@http://localhost:3002/remoteEntry.js" , but the browser still report the error.

Here's my config:

app1

app2

other

I am sure I have read shared-routes2 folder in this repo.

The difference between my demo and shared-routes is this different framework.

I use vue-cli in my demo.

I inspect the generated webpack config:

/* config.plugin('mf') */
// app1
new ModuleFederationPlugin(
  {
    name: 'app1',
    filename: 'remoteEntry.js',
    remotes: {
      app2: 'app2@http://localhost:8082/remoteEntry.js'
    },
    exposes: {},
    shared: {
      vue: {
        eager: true,
        singleton: true,
        requiredVersion: '^2.6.11'
      },
      'vue-router': {
        eager: true,
        singleton: true,
        requiredVersion: '^3.4.3'
      }
    }
  }
)

// app2
/* config.plugin('mf') */
new ModuleFederationPlugin(
  {
    name: 'app2',
    filename: 'remoteEntry.js',
    exposes: {
      './routes': './src/router/index.ts'
    },
    shared: {
      vue: {
        eager: true,
        singleton: true,
        requiredVersion: '^2.6.11'
      },
      'vue-router': {
        eager: true,
        singleton: true,
        requiredVersion: '^3.4.3'
      }
    }
  }
)

[Ge-yuan-jun]

When I use config
library: { type: 'var', name: 'app2' },

It changes to another error:
app.js:62 Uncaught (in promise) ReferenceError: app2 is not defined while loading "./routes" from webpack/container/reference/app2

[Ge-yuan-jun]

@ScriptedAlchemy Very sorry to bother you

can you help with some config advice?

or need some more config info ?

[jacob-ebey]

library: { type: "var", name: "app2" }

then try manually adding the remoteEntry. That error says "it's not defined", meaning the remote entry was not loaded before webpack tried to access it.

[Ge-yuan-jun]

@jacob-ebey Sorry to interrupt you

I tried your advice, emmm, the error above disappears;

but, another error occurs, it say 'Uncaught (in promise) Error: Container missing
while loading "./routes" from webpack/container/reference/app2'

may I have more advice ?

manually adding the remoteEntry code:

loadScript('http://localhost:8082/remoteEntry.js').then(() => {
  import('./bootstrap')
})

[Ge-yuan-jun]

Finally, it's not webpack config error. I create a demo here

the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far.

For me, I will create a PR for vue3-demo, it doesn't contain how to use routes in remote repo.

this issue closed

[HolyZheng]

Finally, it's not webpack config error. I create a demo here

the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far.

For me, I will create a PR for vue3-demo, it doesn't contain how to use routes in remote repo.

this issue closed

兄弟，有发现问题吗？我现在也遇到同样的问题

[HolyZheng]

Finally, it's not webpack config error. I create a demo here
the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far.
For me, I will create a PR for vue3-demo, it doesn't contain how to use routes in remote repo.
this issue closed

兄弟，有发现问题吗？我现在也遇到同样的问题

我这边发现问题了，是qiannkun沙箱问题，暂时通过配置library: { type: 'window', name: 'xxx' } 来解决

[nzinovyev19]

I'm using vue-cli with vue3 and disabling splitChunks was the solution for me.
#vuejs/vue-cli#6318 (comment)

[popuguytheparrot]

how a u resolve it?

[udittyagi]

Hello I am facing same issue
Remote Webpack Config
`const merge = require('webpack-merge');
const common = require('./webpack.config.js');
const deps = require('../package.json').dependencies;
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
output: {
publicPath: 'http://localhost:3000/v2/assets/dist/'
},
optimization: {
splitChunks: {
cacheGroups: {
defaultVendors: false
}
}
},
plugins: [
new CleanWebpackPlugin(['./assets/dist'], {
root: path.resolve(__dirname, '../')
}),

	new AssetsPlugin({ filename: 'build_assets/react.json', prettyPrint: true }),
	new ModuleFederationPlugin({
		name: 'corpAdmin',
		filename: 'remoteEntry.js',
		exposes: {
			'./BizLanding': './src/bizLanding/bootstrap.js'
		},
		shared: {
			'react': {
				eager: true,
				singleton: true,
				requiredVersion: deps.react
			},
			'react-dom': {
				eager: true,
				singleton: true,
				requiredVersion: deps['react-dom']
			}
		}
	})
],
devServer: {
	contentBase: './assets/dist'
}

});
`

Host Webpack config
`const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin
const deps = require("./package.json").dependencies;

module.exports = {
//Where files should be sent once they are bundled
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
publicPath: "http://localhost:3005/",
},
//webpack 5 comes with devServer which loads in development mode
devServer: {
port: 3005,
watchContentBase: true
},
//Rules of how webpack will take our files, complie & bundle them for the browser
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
},
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'corpAnother',
filename: 'remoteEntry.js',
remotes: {},
exposes: {
'./Header': './src/App.js'
},
shared: {
...deps,
'react': {
eager: true,
singleton: true,
requiredVersion: deps.react
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: deps['react-dom']
}
}
}),
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin()],
}`

Uncaught ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:3000/v2/assets/dist/remoteEntry.js)
while loading "./BizLanding" from webpack/container/reference/corpAdmin
at Object.webpack/container/reference/corpAdmin (index.bundle.js:474)
at webpack_require (index.bundle.js:511)
at initExternal (index.bundle.js:782)
at Function.webpack_require.I (index.bundle.js:795)
at index.bundle.js:901
at Object.webpack/sharing/consume/default/react-dom/react-dom (index.bundle.js:947)
at index.bundle.js:985
at Array.forEach ()
at Object.webpack_require.f.consumes (index.bundle.js:968)
at index.bundle.js:588

/src/bizLanding/bootstrap.js
import React from 'react';

const BizLandingApp = () => (

Hello App From Another Application

);

export default BizLandingApp;

[ScriptedAlchemy]

Public path is probably incorrect

[huntJs]

Finally, it's not webpack config error. I create a demo here
the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far.
For me, I will create a PR for vue3-demo, it doesn't contain how to use routes in remote repo.
this issue closed

兄弟，有发现问题吗？我现在也遇到同样的问题

我这边发现问题了，是qiannkun沙箱问题，暂时通过配置library: { type: 'window', name: 'xxx' } 来解决

请问你这边qiankun项目是如何使用MF，可以分享下一个demo吗