Import error using components as local async components, nuxt js

[MrToxy]

I really hate the idea of not having the possibility of importing the components locally, I'm only using this package in one component in my entire app and therefore It doesn't make sense to have it globally registered... so I tried to use it locally. I'ts working but I get a vue warning.

I'm importing it in my component as:

components: {
        SocialSharing: () =>
            import('vue-social-sharing/src/social-sharing')
                .then((m) => m.default)
                .catch((e) => {
                    console.log('error: ', e);
                }),
        Network: () =>
            import('vue-social-sharing/src/social-sharing-network').then((m) => m || m.default),
    },

Warning:

error:  Unexpected identifier                                                                                                    10:39:47

  (function (exports, require, module, __filename, __dirname) { import SocialSharingNetwork from './social-sharing-network';
  ^^^^^^^^^^^^^^^^^^^^

  SyntaxError: Unexpected identifier
  at new Script (vm.js:83:7)
  at createScript (vm.js:277:10)
  at Object.runInThisContext (vm.js:329:10)
  at Module._compile (internal/modules/cjs/loader.js:712:26)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
  at Module.load (internal/modules/cjs/loader.js:653:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
  at Function.Module._load (internal/modules/cjs/loader.js:585:3)
  at Module.require (internal/modules/cjs/loader.js:692:17)
  at require (internal/modules/cjs/helpers.js:25:18)
  at r (node_modules/vue-server-renderer/build.dev.js:9295:16)
  at Object.vue-social-sharing/src/social-sharing (server.js:13796:18)
  at __webpack_require__ (server.js:27:30)
  at module.exports.__webpack_require__.t (server.js:84:33)
  at process._tickCallback (internal/process/next_tick.js:68:7)

 ERROR  Cannot read property '__esModule' of undefined                                                                           10:39:47

  at ensureCtor (node_modules/vue/dist/vue.runtime.common.dev.js:3576:10)
  at node_modules/vue/dist/vue.runtime.common.dev.js:3649:26
  at node_modules/vue/dist/vue.runtime.common.dev.js:338:10
  at process._tickCallback (internal/process/next_tick.js:68:7)

Although the components render and work perfectly, I'd like to get rid of this warning, Please do not tell me that the solution is registering the components globally, I know it works, but I want to avoid it and don't see why not.

[nicolasbeauvais]

Thank you for raising this issue, the latest version of Vue Social Sharing has been released with improved support for SSR.

[MrToxy]

sorry but that doesn't address the original question. Unless the docs aren't updated there's still no way to locally register the component making it truly tree shakable. Do please re-open the issue or attach an example on how to accomplish this

[nicolasbeauvais]

Hello @MrToxy, you are right. I updated the latest version you can now import only the ShareNetwork component:

<template>
  <ShareNetwork
    network="facebook"
    url="https://vuejs.org/
  >
    Share on Facebook
  </ShareNetwork>
</template>

<script>
import { ShareNetwork } from 'vue-social-sharing'

export default {
  components: {
    ShareNetwork,
  }
}

[MrToxy]

@nicolasbeauvais amazing, thank you!