Nuxt 3 - serialize is not defined about vue-social-sharing

[shtse8]

I have the same issue.

 ERROR  Cannot restart nuxt:  serialize is not defined                                                                                                                          00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)


 ERROR  [unhandledRejection] serialize is not defined                                                                                                                           00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)

serialize is not defined here.
https://github.com/nicolasbeauvais/vue-social-sharing/blob/next/nuxt/vue-social-sharing-plugin.template.js.tpl#L5

import Vue from 'vue';
import VueSocialSharing from 'vue-social-sharing';

// Initialize VueSocialSharing and set custom sharing networks if specified
Vue.use(VueSocialSharing, [<%= serialize(options) %>][0]);

workaround solution
add vue-social-sharing.ts to /plugins

import VueSocialSharing from 'vue-social-sharing'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSocialSharing)
})

Remove:

// In your nuxt.config.js file:
modules: [
  'vue-social-sharing/nuxt'
]

[megatheikal]

I have the same issue.

 ERROR  Cannot restart nuxt:  serialize is not defined                                                                                                                          00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)


 ERROR  [unhandledRejection] serialize is not defined                                                                                                                           00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)

serialize is not defined here. https://github.com/nicolasbeauvais/vue-social-sharing/blob/next/nuxt/vue-social-sharing-plugin.template.js.tpl#L5

import Vue from 'vue';
import VueSocialSharing from 'vue-social-sharing';

// Initialize VueSocialSharing and set custom sharing networks if specified
Vue.use(VueSocialSharing, [<%= serialize(options) %>][0]);

workaround solution add vue-social-sharing.ts to /plugins

import VueSocialSharing from 'vue-social-sharing'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSocialSharing)
})

Remove:

// In your nuxt.config.js file:
modules: [
  'vue-social-sharing/nuxt'
]

After this fix it starts working but show warn in console

change the file name vue-social-sharing.ts to vue-social-sharing.client.ts

[Aybee5]

Thank you @shtse8 for this.

I think you should open a PR to add the workaround on the docs

[GefeiSHEN]

Thank you @shtse8 for the quick fix. However, I do notice a warning on the server side:

Failed to resolve component: ShareNetwork If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I've attempted to fix it by modifying next.config.ts with:

vue: {
        compilerOptions: {
            isCustomElement: (tag: string) => ["ShareNetwork"].includes(tag),
        },
    },
vite: {
        build: {
            rollupOptions: {
                plugins: [
                    //lifted from https://github.com/rollup/rollup/issues/4090
                    {
                        name: "disable-treeshake",
                        transform(code, id) {
                            if (
                                /node_modules[/]vue-social-sharing/.test(id)
                            ) {
                                // Disable tree shake for vue-social-sharing module
                                return {
                                    code,
                                    map: null,
                                    moduleSideEffects: "no-treeshake",
                                };
                            }
                            return null;
                        },
                    },
                ],
            },
        },
    },

But the above modification results in an unclickable ''. Could you please share how did you managed to make it run on Vue3 + Nuxt3?

[oawebdev]

I have the same issue.

 ERROR  Cannot restart nuxt:  serialize is not defined                                                                                                                          00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)


 ERROR  [unhandledRejection] serialize is not defined                                                                                                                           00:54:35  

  at eval (eval at <anonymous> (node_modules\.pnpm\[email protected]\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@[email protected]_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/[email protected]_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/[email protected]/node_modules/perfect-debounce/dist/index.mjs:54:10)

serialize is not defined here. https://github.com/nicolasbeauvais/vue-social-sharing/blob/next/nuxt/vue-social-sharing-plugin.template.js.tpl#L5

import Vue from 'vue';
import VueSocialSharing from 'vue-social-sharing';

// Initialize VueSocialSharing and set custom sharing networks if specified
Vue.use(VueSocialSharing, [<%= serialize(options) %>][0]);

workaround solution add vue-social-sharing.ts to /plugins

import VueSocialSharing from 'vue-social-sharing'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSocialSharing)
})

Remove:

// In your nuxt.config.js file:
modules: [
  'vue-social-sharing/nuxt'
]

After this fix it starts working but show warn in console

[lucianobosco]

Thank you @shtse8 for the quick fix. However, I do notice a warning on the server side:

Failed to resolve component: ShareNetwork If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I've attempted to fix it by modifying next.config.ts with:

vue: {
        compilerOptions: {
            isCustomElement: (tag: string) => ["ShareNetwork"].includes(tag),
        },
    },
vite: {
        build: {
            rollupOptions: {
                plugins: [
                    //lifted from https://github.com/rollup/rollup/issues/4090
                    {
                        name: "disable-treeshake",
                        transform(code, id) {
                            if (
                                /node_modules[/]vue-social-sharing/.test(id)
                            ) {
                                // Disable tree shake for vue-social-sharing module
                                return {
                                    code,
                                    map: null,
                                    moduleSideEffects: "no-treeshake",
                                };
                            }
                            return null;
                        },
                    },
                ],
            },
        },
    },

But the above modification results in an unclickable ''. Could you please share how did you managed to make it run on Vue3 + Nuxt3?

Did you manage to fix this error? Im facing the same when using Nuxt 3 SSR

[Vue warn]: Failed to resolve component: ShareNetwork
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Component <Anonymous> is missing template or render function.