Error spam "$attrs is readonly" and "$listeners is readonly" in console with current master

[nickvergessen]

Open Talk with 7beta4:

• ✨

Open Talk with master what is going to be 7beta5:

• 💥 Huge error log for each conversation in your left sidebar

[Vue warn]: $attrs is readonly.

found in

---> <VPopperContent>
       <VPopper>
         <VDropdown>
           <NcPopover>
             <NcActions>
               <RouterLink>
                 <NcListItem>
                   <Conversation> at src/components/LeftSidebar/ConversationsList/Conversation.vue
                     <ConversationsList> at src/components/LeftSidebar/ConversationsList/ConversationsList.vue
                       <NcAppNavigation>
                         <LeftSidebar> at src/components/LeftSidebar/LeftSidebar.vue
                           <NcContent>
                             <App> at src/App.vue
                               <Root> vue.runtime.esm.js:4568
[Vue warn]: $listeners is readonly.

found in

---> <VPopperContent>
       <VPopper>
         <VDropdown>
           <NcPopover>
             <NcActions>
               <RouterLink>
                 <NcListItem>
                   <Conversation> at src/components/LeftSidebar/ConversationsList/Conversation.vue
                     <ConversationsList> at src/components/LeftSidebar/ConversationsList/ConversationsList.vue
                       <NcAppNavigation>
                         <LeftSidebar> at src/components/LeftSidebar/LeftSidebar.vue
                           <NcContent>
                             <App> at src/App.vue
                               <Root>

[raimund-schluessler]

Could you try this approach: #3268 (comment)

[raimund-schluessler]

The problem is a duplication of the vue dependency which causes this warning. Adding this

webpackConfig.resolve.alias = {
    "vue$": path.resolve('./node_modules/vue')
}

to my webpack config, e.g. in Tasks fixes the issue and even reduces the bundle size, indicating the duplication is gone.
Maybe we should put this in the common webpack configuration. It seems to be necessary for vue3 anyway, see here:
https:/nextcloud/webpack-vue-config/blob/800d666f1117523481f519d7b6a15e4fe49576fc/webpack.config.js#L117-L119

@skjnldsv @marcoambrosini @vinicius73 for opinions.

[vinicius73]

This is a good trick.
Although it not solves the root cause, it will work in the main scenarios.

[raimund-schluessler]

Although it not solves the root cause, it will work in the main scenarios.

The question is what is the root cause. One package probably imports in a different way than simply using import Vue from 'vue' but finding which one it is, might be a pain.

[skjnldsv]

Is this still happening?

[raimund-schluessler]

Is this still happening?

I don't know, to be honest. I didn't see it for a while, and if I remember correctly, it only happened when mixing development builds with production builds.

But the workaround to prevent this is still necessary for the vue3 branch in my case:

webpackConfig.resolve.alias = {
    "vue$": path.resolve('./node_modules/vue')
}

[skjnldsv]

But the workaround to prevent this is still necessary for the vue3 branch in my case:

webpackConfig.resolve.alias = {
    "vue$": path.resolve('./node_modules/vue')
}

Seems I also encountered this and this is the way. On the app side, not this library ofc.

[raimund-schluessler]

But the workaround to prevent this is still necessary for the vue3 branch in my case:

webpackConfig.resolve.alias = {
    "vue$": path.resolve('./node_modules/vue')
}

Seems I also encountered this and this is the way. On the app side, not this library ofc.

Something for the shared webpack config then?

[raimund-schluessler]

PR is in nextcloud-libraries/webpack-vue-config#432.