4

Hello to everyone here !

We have 2 apps on the exact same version (Vue 2.7.14) which allow us to use Composition API and <script setup> syntaxe in each of the apps.

We set up WebPack's ModuleFederation to create a bridge between these 2 apps. Note that, on each app, the <script setup> approach is working great, and also all the Composition API hooks, methods and reactivity.

Now, when we try to import a component from project B to the project A, it works globaly, but in our console, we have this error :

[Vue warn]: inject() can only be used inside setup() or functional components.

The weird thing is that : inject() or onMounted() are indeed called inside a <script setup> syntax component. And it works perfectly for every other components in these projects.

It seems that, passing through ModuleFederation, the setup is not done as it should or something like that.

Now, here is the way we make the exposure of our components on project B :

new ModuleFederationPlugin({
   name: 'assets',
   filename: 'remoteEntry.js',
   library: { type: 'var', name: 'assets' },
   exposes: {
      './default/Favorites': './src/components/Favorites/views/Favourites',
   },
   shared: require('./package.json').dependencies
})

And here is how we make the requirement of the components on project A (which uses project B's components) :

new ModuleFederationPlugin({
   name: 'webapp',
   remotes: {
      assets: 'assets@http://localhost:9001/remoteEntry.js'
   }
})

Finaly, inside our project A, in a main.js file, we register these components like that :

Vue.component('Favorites', () => import('assets/default/Favorites'))

Note that we also tried like that :

Vue.component('Favorites', (resolve) => {
    import('assets/default/Favorites')
        .then((module) => resolve(module.default))
        .catch(() => false)
})

It really looks like the chunk created with ModuleFederation can't play the script setup correctly. Anyone here to help us with this really annoying issue ?

We are quite sure that coming back to the classical Vue 2 syntax (classical defineComponent) would of course make all those things work great, but we really want to keep up with the Composition API.

Thanks to all of you who could help us.

Lior CHAMLA
  • 128
  • 8

1 Answers1

0

Have you tried with a simple function instead of arrow function ? I have encountered in an another problem with the arrow function with the composition api and script setup because the scope of "this" is different.

Vincere
  • 1
  • 1