Doesn't work in Nuxt.js (SSR)

[florian-lefebvre]

Please check all that apply

• visual bug
• functional bug
• able to consistently reproduce

Expected Behavior

Importing Flagpack as a plugin should work.

Current Behavior

I get an error: Unexpected token '<'.

Possible Solution

This might be related with the SSR mode

Steps to Reproduce

1. Create a nuxt project and select SSR mode, Node.js hosting
2. yarn add vue-flagpack
3. create plugins/vue-flagpack.js and paste Method A from the docs
4. Add it in the plugins array in nuxt.config.js like: plugins: ["~/plugins/vue-flagpack.js"]

Screenshots

Logs

See screenshot.

Context

I'm trying to add flags to a lang switcher, based on @nuxtjs/i18n.

Your Environment

• Version used: "vue-flagpack": "^1.0.1"
• Browser Name and version: Opera GX (Opera 73)
• Operating System and version (desktop or mobile): Windows 10 x64
• Nuxt: "nuxt": "^2.14.12",
• Link to your project: Private Gitlab repo

[jdddog]

I found that it works if you transpile both flagpack-core and vue-flagpack, you do this by adding the following to nuxt.config.js:

build: {
    transpile: ['flagpack-core', 'vue-flagpack']
  }

I think it might be because flagpack-core is an es6 module and Nuxt expects something else?

You also need to wrap Flag in <client-only> or set the plugin mode parameter to 'client' .

[avrtau]

@jdddog Looks like setting mode: 'client' does the trick without the need for setting the transpile options