Version

3.0.2

Reproduction link

https://github.com/anish2690/mfe-webpack-demo-vue

Steps to reproduce

Created an example with two apps one is host and another one is remote, components of remote app are used in Host app. If remote component contains and another component of the remote app that fails but it works with render function / template.

What is expected?

Resolve the nested component same like render functions / template

What is actually happening?

runtime-core.esm-bundler.js:38 [Vue warn]: resolveComponent can only be used in render() or setup(). warn @ runtime-core.esm-bundler.js:38 resolveAsset @ runtime-core.esm-bundler.js:4978 resolveComponent @ runtime-core.esm-bundler.js:4930 render @ Content.vue:5 renderComponentRoot @ runtime-core.esm-bundler.js:696 componentEffect @ runtime-core.esm-bundler.js:4035 reactiveEffect @ reactivity.esm-bundler.js:42 effect @ reactivity.esm-bundler.js:17 setupRenderEffect @ runtime-core.esm-bundler.js:4018 mountComponent @ runtime-core.esm-bundler.js:3976 processComponent @ runtime-core.esm-bundler.js:3936 patch @ runtime-core.esm-bundler.js:3547 componentEffect @ runtime-core.esm-bundler.js:4117 reactiveEffect @ reactivity.esm-bundler.js:42 callWithErrorHandling @ runtime-core.esm-bundler.js:154 flushJobs @ runtime-core.esm-bundler.js:364 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:264 queueJob @ runtime-core.esm-bundler.js:258 run @ reactivity.esm-bundler.js:183 trigger @ reactivity.esm-bundler.js:189 set value @ reactivity.esm-bundler.js:721 (anonymous) @ runtime-core.esm-bundler.js:6515 Promise.then (async) setup @ runtime-core.esm-bundler.js:6514 callWithErrorHandling @ runtime-core.esm-bundler.js:154 setupStatefulComponent @ runtime-core.esm-bundler.js:6224 setupComponent @ runtime-core.esm-bundler.js:6185 mountComponent @ runtime-core.esm-bundler.js:3960 processComponent @ runtime-core.esm-bundler.js:3936 patch @ runtime-core.esm-bundler.js:3547 mountChildren @ runtime-core.esm-bundler.js:3736 mountElement @ runtime-core.esm-bundler.js:3659 processElement @ runtime-core.esm-bundler.js:3631 patch @ runtime-core.esm-bundler.js:3544 mountChildren @ runtime-core.esm-bundler.js:3736 mountElement @ runtime-core.esm-bundler.js:3659 processElement @ runtime-core.esm-bundler.js:3631 patch @ runtime-core.esm-bundler.js:3544 componentEffect @ runtime-core.esm-bundler.js:4053 reactiveEffect @ reactivity.esm-bundler.js:42 effect @ reactivity.esm-bundler.js:17 setupRenderEffect @ runtime-core.esm-bundler.js:4018 mountComponent @ runtime-core.esm-bundler.js:3976 processComponent @ runtime-core.esm-bundler.js:3936 patch @ runtime-core.esm-bundler.js:3547 render @ runtime-core.esm-bundler.js:4634 mount @ runtime-core.esm-bundler.js:2985 app.mount @ runtime-dom.esm-bundler.js:1208 ./src/main.js @ main.js:12 __webpack_require__ @ bootstrap:18 (anonymous) @ startup:3 (anonymous) @ startup:4 runtime-core.esm-bundler.js:38 [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) at <Content> at <AsyncComponentWrapper> at <Layout>

You're not sharing vue

You need to share things that depend on a singleton, like vue - otherwise its loading two separate copies of vue

behaviour is same after sharing vue as singleton

shared: {
       vue: {
         singleton: true,
       },
       '@vue/compiler-sfc': {
         singleton: true,
       },
       'vue-loader': {
         singleton: true,
       },
  }

There's more @vue/* packages than that.

This is a webpack configuration question, not a Vue one.

You can just share @vue/ And it'll share all the subsets.

Don't share loaders. Also use required version