search

nicolasbeauvais / vue-social-sharing

A renderless Vue.js component for sharing links to social networks, compatible with SSR
https://nicolasbeauvais.github.io/vue-social-sharing/
MIT License
1.39k stars 196 forks source link

Nuxt 3 - serialize is not defined #315

Closed MrSunshyne closed 1 year ago

MrSunshyne commented 2 years ago

Trying to use this plugin with Nuxt3 results in the error serialize is not defined

Anyone else got this issue?

image

shtse8 commented 2 years ago

I have the same issue.

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

  at eval (eval at <anonymous> (node_modules\.pnpm\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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'
]
Aybee5 commented 2 years ago

Thank you @shtse8 for this.

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

GefeiSHEN commented 1 year ago

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 commented 1 year ago

I have the same issue.

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

  at eval (eval at <anonymous> (node_modules\.pnpm\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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 image

lucianobosco commented 1 year ago

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.
megatheikal commented 1 year ago

I have the same issue.

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

  at eval (eval at <anonymous> (node_modules\.pnpm\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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\lodash.template@4.5.0\node_modules\lodash.template\index.js:1550:12), <anonymous>:7:1)
  at compileTemplate (/node_modules/.pnpm/@nuxt+kit@3.0.0-rc.4_xksk6ykcssmhab4dbdyjruocau/node_modules/@nuxt/kit/dist/index.mjs:511:45)
  at async /node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1565:22
  at async Promise.all (index 16)
  at async generateApp (/node_modules/.pnpm/nuxt@3.0.0-rc.4_i6nlvakzchf2ijsj2wbufpcjqi/node_modules/nuxt/dist/index.mjs:1564:3)
  at async _applyPromised (/node_modules/.pnpm/perfect-debounce@0.1.3/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 image

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

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.