nuxt: Unexpected token < when use component

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.

<div align="right">_{This question is available on Nuxt.js community (#c1368)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19

Most upvoted comments

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 }
]

homerjam on Aug 31, 2017

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

danielpost on Sep 4, 2017