[Vue] Application died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'meta')

[snifter]

Vue application does not work. During activation in root-config followed exception is thrown.

Uncaught TypeError: application '@foo/bar' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'meta')
    at autoPublicPath (auto-public-path.jss:15:29)
    at Object../node_modules/systemjs-webpack-interop/auto-public-path/2.js (2.jss:3:1)
    at __webpack_require__ (bootstrapp:24:1)
    at startupp:7:1
    at Object.<anonymous> (startupp:8:1)
    at Object.execute (amd.js:56:35)
    at i (system-core.js:279:32)
    at e (system-core.js:275:10)
    at system-core.js:232:12

App is created with:

npx create-single-spa

? Directory for new project bar
? Select type to generate single-spa application / parcel
? Which framework do you want to use? vue
? Organization name (can use letters, numbers, dash or underscore) foo


Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.4
✨  Creating project in C:\test-vue\bar.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 849 packages in 18s

86 packages are looking for funding
  run `npm fund` for details
�  Invoking generators...
�  Installing additional dependencies...


added 97 packages in 4s

96 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project test.


�  Installing vue-cli-plugin-single-spa...


added 4 packages in 2s

96 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: vue-cli-plugin-single-spa


�  Invoking generator for vue-cli-plugin-single-spa...
�  Installing additional dependencies...


added 1 package in 2s

96 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-single-spa
Project setup complete!
Steps to test your Vue single-spa application:
1. Run 'npm run serve'
2. Go to http://single-spa-playground.org/playground/instant-test?name=@foo/test&url=%2F%2Flocalhost%3A8080%2Fjs%2Fapp.js&framework=vue to see it working!

The same is for Vue2. For React everything works fine.

[filoxo]

My mistake, I was on the wrong tab in my browser and mistook this as the single-spa.js.org repo. Reopening.

[jgavirias13]

I have similar error with Vue 2 TypeError: application '@foo/new-application' died in status LOADING_SOURCE_CODE: undefined is not an object (evaluating 'webpack_require.y.meta')

[jrtitus]

I ran into this problem today also. I tried following the instructions for systemjs-interop, thinking that might have been the issue, but they did not help to resolve it. Then I tried with npx @4, @3 and @2 and all versions produce the same error, so I went looking at vue-cli-plugin-single-spa.

This comment seems to be the solution.

[krankos]

I've run into this problem. I've found that it's a webpack problem. After some research I've managed to get it to work. Your vue.config.js should look like this:

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        output: {
            libraryTarget: "system",
        },
    },
});