Nuxt.js: Unexpected token < when use component

[hackuun]

Hello. Sorry for creating issue about specific component, but this one is too good. I am talking about https://github.com/drewjbartlett/vue-flickity

I made it work with non-SSR Vue app, but got errors with Nuxt.

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/home/***/Documents/WORK/EXAMPLES/nuxt-examples/node_modules/vue-flickity/flickity.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^

SyntaxError: Unexpected token <

I never expect such errors before, so I ask your help.
By the way, error appears when I refresh the page.

_{This question is available on Nuxt.js community (#c1368)}

[NicoPennec]

Have you tried to create a custom plugin with ssr:false option?

module.exports = {
  plugins: [
    { src: '~/plugins/vue-flickity', ssr: false }
  ]
}

or the new option (since Nuxt RC7) <no-ssr>...</no-ssr>
an example here : https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

[hackuun]

I can't pass option when I tried to create one, so no. I didn't tried. But the guy from discord channel says he tried and it didn't help

[hackuun]

@NicoPennec as for no-ssr I tried EGOIST plugin. I think Nuxt using it too? It didn't help.

[hackuun]

By the way, I can't make original library work with Nuxt too - https://flickity.metafizzy.co/

This is sad, it looks like the best Slider/Carousel on the market.

[homerjam]

I ended up using this:

// plugins/vue-flickity.js

import Vue from 'vue';
import Flickity from 'vue-flickity';

Vue.component('flickity', Flickity);

// nuxt.config.js
plugins: [
    { src: '~/plugins/vue-flickity', ssr: false }
]

[hackuun]

@homerjam then how do you pass flickityOptions? It gives error

[homerjam]

Can you show the error?

Note you don't need the following in your component:

components: {
    Flickity
},

Otherwise just pass the options as seen in the example here https://github.com/drewjbartlett/vue-flickity

[hackuun]

You guys are right. It was simple. My mistake was I used Vue.use(Flickity) not Vue.component(Flickity)
Also, I wrapped it in no-ssr to fix hydration.

Thanks all!

[danielpost]

@iamdubx I am having the same issue, can you explain this?

Also, I wrapped it in no-ssr to fix hydration.

[homerjam]

@danielpost there is now a no-ssr component built into nuxt. You can wrap the troublesome component with this to fix hydration (by preventing it from being rendered server side). Also not that in this case Vue.component() was required to prevent missing template error.

[danielpost]

@homerjam Perfect, I missed that! Thank you!

[hackuun]

@danielpost hi. personally I used this package https://github.com/egoist/vue-no-ssr
As I understand, now it's build-in Nuxt. Haven't tried it yet.
Can you please confirm is it working out of the box with new Nuxt?

[danielpost]

@iamdubx Yeah, out of the box. I just wrapped the component in <no-ssr>component here</no-ssr>.

[jean-bertrand]

I've tried all the recommeded solutions above but i keep getting the "Unexpected token <" error. Here is my file https://gist.github.com/jean-bertrand/65533804d52047e3f51688a6fe9992ba.
Do i have to create a separate component for flickity that I then import into the page?

Thanks!

[pelmered]

I just installed vue-flickity and I have the same problem. The <no-ssr> tag does not help.

I get this error after only importing the flickity component like this:
import Flickity from 'vue-flickity';

I get the error even if I don't add the component to my template or register the component with Vue:

    components: {
      Flickity
    },

Maybe it's a problem with the flickity package? I tried downgrading vue-flickity from 1.1.2 to 1.0.11 but it's still the same problem.

[InstanceOfMichael]

Does something like this work?

import Flickity from '~/node_modules/vue-flickity/src/flickity';

[uptownhr]

@InstanceOfMichael yes but you should still load this as a plugin with the SSR option as false. I beleive flickity expects window or dom and will break during SSR if you have that enabled.

[sansor]

I've tried all the recommeded solutions above but i keep getting the "Unexpected token <" error. Here is my file https://gist.github.com/jean-bertrand/65533804d52047e3f51688a6fe9992ba.
Do i have to create a separate component for flickity that I then import into the page?

Thanks!

Were you able to solve it? I am also stuck. I tried everything said above.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.