I am working on a micro-frontend project, using vue 3 and single-spa 5.9.3. I was trying to update one Micro-frontend npm packages to recent releases, it builds correctly but throws this error:
"TypeError: application '@myapp/my-module' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'meta')
at autoPublicPath (http://localhost:9200/js/app.js:48439:32)
at Object../node_modules/systemjs-webpack-interop/auto-public-path/2.js (http://localhost:9200/js/app.js:48418:1)
at __webpack_require__ (http://localhost:9200/js/app.js:75668:33)
at http://localhost:9200/js/app.js:76740:11
at Object.<anonymous> (http://localhost:9200/js/app.js:76744:12)
at Object.execute (/[email protected]/dist/extras/amd.min.js:1:529)
at i (/[email protected]/dist/system.min.js:4:4539)
at e (/[email protected]/dist/system.min.js:4:5014)
at /[email protected]/dist/system.min.js:4:5019"
my '@myapp/my-module' package.json dependencies looks like this:
"dependencies": {
"core-js": "^3.6.5",
"axios": "^0.24.0",
"object-path": "^0.11.8",
"quasar": "^2.5.5",
"single-spa-vue": "^2.1.0",
"vue": "^3.2.29",
"vue-i18n": "^9.1.6",
"vue-inline-svg": "^3.1.0",
"vue-router": "^4.0.0-0",
"vue-axios": "^3.4.0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/jest": "^27.4.1",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "^5.0.3",
"@vue/cli-plugin-e2e-cypress": "^5.0.3",
"@vue/cli-plugin-eslint": "^5.0.3",
"@vue/cli-plugin-router": "^5.0.3",
"@vue/cli-plugin-typescript": "^5.0.3",
"@vue/cli-plugin-unit-jest": "^5.0.3",
"@vue/cli-plugin-vuex": "^5.0.3",
"@vue/cli-service": "^5.0.3",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.0.3",
"jest-junit": "^13.0.0",
"sass": "1.32.12",
"sass-loader": "^10.1.0",
"typescript": "~4.5.5",
"vue-cli-plugin-quasar": "~4.0.4",
"vue-cli-plugin-single-spa": "^3.3.0",
"vue-jest": "^5.0.0-alpha.10"
}
and the single-spa main project "root-config" dependencies and webpack config looks like this:
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@types/systemjs": "^6.1.0",
"babel-eslint": "^11.0.0-beta.2",
"babel-loader": "^8.2.2",
"bootstrap": "5.0.1",
"concurrently": "^5.3.0",
"copy-webpack-plugin": "^8.1.0",
"css-loader": "^6.2.0",
"eslint": "^6.8.0",
"eslint-config-important-stuff": "^1.1.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.4.0",
"html-webpack-plugin": "^5.3.2",
"jest": "^25.4.0",
"jest-cli": "^25.4.0",
"jest-junit": "^13.0.0",
"mini-css-extract-plugin": "^2.2.0",
"prettier": "^2.3.2",
"pretty-quick": "^2.0.2",
"sass": "^1.38.0",
"sass-loader": "^12.1.0",
"serve": "^12.0.0",
"webpack": "^5.51.0",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa": "^5.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"loadash": "^1.0.0",
"single-spa": "^5.9.3"
},
webpack.config.js:
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "myapp";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
},
}),
new MiniCssExtractPlugin({
filename: "css/style.css",
}),
new CopyWebpackPlugin({
patterns: [
{
from: "./src/assets",
to: "./assets",
},
{
from: "./src/config",
to: "./config",
},
{
from:"favicon.ico",
to: "favicon.ico",
},
{
from:"staticwebapp.config.json",
to:"staticwebapp.config.json"
}
],
}),
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
implementation: require("sass"),
},
},
],
},
],
},
externals: ["single-spa", "vue", "vue-router", "vuex", /^@myapp\/.+$/],
});
};
it looks like there is an issue between webpack v5 and v4 versions, but there is no obvious problem to fix from that side.
I am working on a micro-frontend project, using vue 3 and single-spa 5.9.3. I was trying to update one Micro-frontend npm packages to recent releases, it builds correctly but throws this error:
"TypeError: application '@myapp/my-module' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'meta')
at autoPublicPath (http://localhost:9200/js/app.js:48439:32)
at Object../node_modules/systemjs-webpack-interop/auto-public-path/2.js (http://localhost:9200/js/app.js:48418:1)
at __webpack_require__ (http://localhost:9200/js/app.js:75668:33)
at http://localhost:9200/js/app.js:76740:11
at Object.<anonymous> (http://localhost:9200/js/app.js:76744:12)
at Object.execute (https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js:1:529)
at i (https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js:4:4539)
at e (https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js:4:5014)
at https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js:4:5019"
my '@myapp/my-module' package.json dependencies looks like this:
"dependencies": {
"core-js": "^3.6.5",
"axios": "^0.24.0",
"object-path": "^0.11.8",
"quasar": "^2.5.5",
"single-spa-vue": "^2.1.0",
"vue": "^3.2.29",
"vue-i18n": "^9.1.6",
"vue-inline-svg": "^3.1.0",
"vue-router": "^4.0.0-0",
"vue-axios": "^3.4.0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/jest": "^27.4.1",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "^5.0.3",
"@vue/cli-plugin-e2e-cypress": "^5.0.3",
"@vue/cli-plugin-eslint": "^5.0.3",
"@vue/cli-plugin-router": "^5.0.3",
"@vue/cli-plugin-typescript": "^5.0.3",
"@vue/cli-plugin-unit-jest": "^5.0.3",
"@vue/cli-plugin-vuex": "^5.0.3",
"@vue/cli-service": "^5.0.3",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.0.3",
"jest-junit": "^13.0.0",
"sass": "1.32.12",
"sass-loader": "^10.1.0",
"typescript": "~4.5.5",
"vue-cli-plugin-quasar": "~4.0.4",
"vue-cli-plugin-single-spa": "^3.3.0",
"vue-jest": "^5.0.0-alpha.10"
}
and the single-spa main project "root-config" dependencies and webpack config looks like this:
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@types/systemjs": "^6.1.0",
"babel-eslint": "^11.0.0-beta.2",
"babel-loader": "^8.2.2",
"bootstrap": "5.0.1",
"concurrently": "^5.3.0",
"copy-webpack-plugin": "^8.1.0",
"css-loader": "^6.2.0",
"eslint": "^6.8.0",
"eslint-config-important-stuff": "^1.1.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.4.0",
"html-webpack-plugin": "^5.3.2",
"jest": "^25.4.0",
"jest-cli": "^25.4.0",
"jest-junit": "^13.0.0",
"mini-css-extract-plugin": "^2.2.0",
"prettier": "^2.3.2",
"pretty-quick": "^2.0.2",
"sass": "^1.38.0",
"sass-loader": "^12.1.0",
"serve": "^12.0.0",
"webpack": "^5.51.0",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa": "^5.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"loadash": "^1.0.0",
"single-spa": "^5.9.3"
},
webpack.config.js:
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "myapp";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
},
}),
new MiniCssExtractPlugin({
filename: "css/style.css",
}),
new CopyWebpackPlugin({
patterns: [
{
from: "./src/assets",
to: "./assets",
},
{
from: "./src/config",
to: "./config",
},
{
from:"favicon.ico",
to: "favicon.ico",
},
{
from:"staticwebapp.config.json",
to:"staticwebapp.config.json"
}
],
}),
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
implementation: require("sass"),
},
},
],
},
],
},
externals: ["single-spa", "vue", "vue-router", "vuex", /^@myapp\/.+$/],
});
};
it looks like there is an issue between webpack v5 and v4 versions, but there is no obvious problem to fix from that side.
Share Improve this question asked Mar 15, 2022 at 17:41 Salim Ben HassineSalim Ben Hassine 3491 gold badge6 silver badges20 bronze badges1 Answer
Reset to default 18I had the same issue migrating to webpack 5 and vue-cli-plugin-single-spa v3.3.0. In your individual application you need to set a field in the vue.config.js:
module.exports = {
// various other settings such as publicPath, etc
// ...
configureWebpack: {
output: {
libraryTarget: 'system',
},
},
}
I'm not sure if you also need this in your webpack.config.js:
return merge(defaultConfig, {
output: {
libraryTarget: 'system'
},
// other settings