Encountered an issue while trying to read properties of undefined (specifically 'meta') within a Vue 3 single-spa application

I've been working on a micro-frontend project, utilizing vue 3 and single-spa 5.9.3. Recently, I attempted to update one of the npm packages for a Micro-frontend to the latest release. The build process went smoothly, but it resulted in the following 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6f656f687971766f5c2a322b322c">[email protected]</a>/dist/extras/amd.min.js:1:529)
    at i (https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a1aba1a6b7bfb8a192e4fce5fce2">[email protected]</a>/dist/system.min.js:4:4539)
    at e (https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6d676d6a7b73746d5e283029302e">[email protected]</a>/dist/system.min.js:4:5014)
    at https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cbc1cbccddd5d2cbf88e968f9688">[email protected]</a>/dist/system.min.js:4:5019"

The dependencies listed in my package.json for '@myapp/my-module' are as follows:

  "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"
  },
  ...

...the issue seems to stem from an incompatibility between webpack versions 5 and 4, although finding a resolution isn't straightforward from that end.

javascriptvue.jswebpacksingle-spa

Answer №1

When I faced the same challenge while migrating to webpack 5 and vue-cli-plugin-single-spa v3.3.0, I discovered a solution. In your specific application, you must update a field in the vue.config.js:

module.exports = {
  // other configurations like publicPath, etc
  // ...
  configureWebpack: {
    output: {
      libraryTarget: 'system',
    },
  },
}

It is uncertain whether you also need to make the same adjustment in your webpack.config.js:

return merge(defaultConfig, {
  output: {
    libraryTarget: 'system'
  },
  // other configurations

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying a variety of class names in real-time based on JSON data results

Extracting multiple class names from a single key value in a JSON response and dynamically binding these class names. Here is an example of my JSON result: [ { "categoryId": 1, "categoryValue": "Mobiles", "divId": "MobilesId", "uiClass": ...

javascriptjqueryjsonjquery-ui

Easy Steps for Mapping Json Data into an Array

Here is the JSON Format I am working with: { "Data": { "-template": "Parallax", "Explore": { "IslandLife": { "TourismLocation": [ { "Title": "Langkawi", "Latitude": "6.350000", "Longitude": "99.800000", "YouTub ...

javascriptjqueryarraysjsongoogle-maps

What is the best method for storing a JavaScript widget with analytics - should it be done dynamically or statically?

My widget comes with a customizable boot loader that is used on websites. The boot loader file retrieves the settings for the widget and generates it accordingly. Normally, the content of the bootloader file remains static unless there are modifications ma ...

phpjavascriptjsoncachingwidget

What purpose does process.env.NODE_ENV serve within my Vue.js custom component?

Struggling to develop a custom HTML element using vuejs and vite. Each time I build the element, process.env.NODE_ENV is inserted into the js, causing issues when trying to use the component outside of vuejs. My aim is to create an element that can be util ...

vue.jsvite

Top tips for seamless image transitions

Currently working on a slideshow project and aiming to incorporate smooth subpixel image transitions that involve sliding and resizing, similar to the Ken Burns effect. After researching various techniques used by others, I am curious to learn which ones ...

javascriptcanvascssslideshowtransition

The Vuetify navigation drawer seems to have a quirk where it only closes after an item

I am brand new to Vue and struggling to figure out why my vue v-navigation-drawer is not working properly. It is located in app-root.vue and was initially closing when clicking on a drawer item, but now requires two clicks to close. After the first click, ...

javascriptvisual-studiovue.jsvuetify.jsv-navigation-drawer

React-select-pagination is failing to retrieve data while scrolling

Struggling to load over 20,000 options using react-select from a Node API database? The page was barely loading until I implemented "react-select-async-pagination". However, there's a problem - the data is only fetched once. import React, { useRef, us ...

javascriptnode.jsreactjspaginationreact-select

Is there a way to make the React component automatically refresh upon clicking the search button?

Just starting out with React and JavaScript, I decided to experiment with accessing a public API. Here is the function I created: import { useState } from "react"; import CountrySWR from "./CountrySWR"; export default function SearchFo ...

javascriptreactjs

"Expo Securestore is encountering an issue where it is unable to store the user ID and token following authentication

I am currently working on securely storing the userId and token in SecureStore. I have successfully retrieved the token from SecureStore on the next screen, but for some reason, I am unable to see the userId. const doUserLogIn = async() => { try { ...

javascriptandroidreactjsreact-nativefrontend

Updating Button Text Upon Click

I am looking to create a webpage filled with riddles. After each riddle, there will be an answer button that, when clicked, reveals the answer. Clicking the button again should hide the answer. I attempted to implement this functionality using Javascript, ...

javascriptjqueryhtmlcss

Having issues with a drop-down in Bootstrap. Is there anyone who can assist in getting it to function

I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly. Below is the code that was applied: <link href="https://cdn.jsd ...

javascripthtmlcssbootstrap-5

Managing several items within one function

I am working with a json file that contains similar data sets but different objects. { "AP": [{ "name": "Autogen Program" }, { "status": "Completed" }, { "start": "2014-05-05" }, { ...

javascriptjson

The REST API for HTTP DELETE does not validate for null values

Currently facing an issue while developing a RESTful API for a web service. I am attempting to delete an email, but first I need to confirm if the email actually exists. The problem arises when it fails to check if the email is null and does not return a ...

javascriptrestexpressmongoosehttp-delete

Understanding the significance of the argument in the context of `express.json({ extended: false})`

Currently, I am in the process of setting up an API using express and encountered this particular line of code: app.use(express.json( { extended: false } )); Although I have referred to the documentation provided by express, I was unable to locate this sp ...

javascriptnode.jsexpress

When a custom throw is triggered in Vue, the console error message appears un

I have implemented a custom throw in the created() method of my component. throw new Error(`Cookie ${cookieName} not found.`); However, Vue logs this error into the console: [Vue warn]: Error in created hook: "Error: Cookie showLanguageInfo not found ...

vue.js

Is there a glitch in the Vue-i18n functionality when used within the data method?

The i18n folder has content in multiple languages as shown below: src lang cn.js us.js index.js Here is the content of the index.js file: import VueI18n from 'vue-i18n' import Vue from 'vue' Vue.use(VueI ...

vue.jsvue-i18n

Extract the Top X elements from a multidimensional array

Consider an Array that consists of nested arrays: [ ["2000-01-01", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a9a8abe091b6bcb0b8bdffb2bebc">[email protected]</a>", 1, 9, 338], ["2000-01-01", "<a href="/ ...

javascriptarrayssortingtypescript

Guide on programmatically changing the position of a shape in SVG

Check out this tutorial on how to make SVG elements draggable using JQuery and Jquery-svg. The accepted answer provides an implementation for moving a circle by changing the cx and cy attributes. But how can I achieve drag-and-drop functionality for a pol ...

javascriptjquerydrag-and-dropsvg

Unexpected behavior encountered in Rails app with unobtrusive JavaScript

I'm facing an issue with my link_to setup. Here's what I have: <%= link_to "Load More", comments_feed_path(@post.id), :id => 'my-link', :remote => true %> In my application.js file, I have the following code: $( document ...

javascriptruby-on-rails

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

javascriptphphtmlmysqlcss