Invalid or Unexpected Token - Vue.js, after implementing vue-gallery (Blueimp Gallery for vue)

Question

I'm attempting to implement vue-gallery in vue.js, which I built using nuxt.js.

I've followed various examples and github issue answers, to no avail. I turn here because I've exhausted my current problem solving and googling capabilities:)

================== UPDATE New error message is:

warning in ./plugins/vue-gallery.js

"export 'default' (imported as 'VueGallery') was not found in 'vue-gallery'

I updated nuxt.config.js to look like this:

  build: {
    /*
    ** add vue-gallery to transpile process
    */
   transpile: ['vue-gallery'],
    /*
    ** Use autoprefixer
    */
   postcss: [
    require('autoprefixer')
   ],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

And I tried updating vue-gallery.js to see if I could fix the export default issue, to this:

import Vue from 'vue' import VueGallery from 'vue-gallery'

export default function vuegallery() {
  if (process.browser) {
    // VueGallery = require('vue-gallery')
    Vue.use(VueGallery, {name: 'vue-gallery'})
  }
  console.log('plugin vue-gallery is locked and loaded')
}

===================

The code repo is available at:

https://bitbucket.org/earleymw/front-end-dev-test-1/src/master/ The error in CLI is

✖ error /Users/mikeearley/code/front-end-dev-test-1/rogue-challenge/node_modules/blueimp-gallery/css/blueimp-gallery.min.css:1
  (function (exports, require, module, __filename, __dirname) { @charset "UTF-8";.blueimp-gallery,.blueimp-gallery>.slides>.slide>.slide-content{position:absolute;top:0;right:0;bottom:0;left:0;-moz-backface-visibility:hidden}.blueimp-gallery>.slides>.slide>.slide-content{margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;opacity:1}.blueimp-gallery{position:fixed;z-index:999999;overflow:hidden;background:#000;background:rgba(0,0,0,.9);opacity:0;display:none;direction:ltr;-ms-touch-action:none;touch-action:none}.blueimp-gallery-carousel{position:relative;z-index:auto;margin:1em auto;padding-bottom:56.25%;box-shadow:0 0 10px #000;-ms-touch-action:pan-y;touch-action:pan-y}.blueimp-gallery-display{display:block;opacity:1}.blueimp-gallery>.slides{position:relative;height:100%;overflow:hidden}.blueimp-gallery-carousel>.slides{position:absolute}.blueimp-gallery>.slides>.slide{position:

  SyntaxError: Invalid or unexpected token

The error in the browser is:

SyntaxError
Invalid or unexpected token
module.js
Missing stack framesJS 
Module.require@579:17
vm.js:80:10
createScript
vm.js:139:10
Object.runInThisContext
module.js:599:28
Module._compile
module.js:646:10
Module._extensions..js
module.js:554:32
Module.load
module.js:497:12
tryModuleLoad
module.js:489:3
Module._load
module.js:579:17
Module.require
internal/module.js:11:18
require
module.js:635:30
Module._compile
module.js:646:10
Module._extensions..js
module.js:554:32
Module.load
module.js:497:12
tryModuleLoad
module.js:489:3
Module._load

Currently, I have a '~/plugins/vue-gallery.js' file containing:

import Vue from 'vue'
import VueGallery from 'vue-gallery'

if (process.browser) {
    // VueGallery = require('vue-gallery')
    Vue.use(VueGallery, {name: 'vue-gallery'})
  }
  console.log('plugin vue-gallery is locked and loaded')

And in 'nuxt.config.js':

  /*
  ** plugins
  */
  plugins: [{ src: '~/plugins/vue-gallery.js', ssr: false }],

And in index.vue:

Aldarund Aldarund · Accepted Answer · 2018-10-08T15:29:31

I have tested locally and found that there no such error happens. You dont need to add it to transpile.

And you are import vue gallery wrong. Vue.use is for vue plugins, while VueGallery is just a component, not a plugin. So your code should be like this:

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('vue-gallery', VueGallery)

And as you can see you dont need check for browser, because you already set ssr: false for this plugin in nuxt config.

Invalid or Unexpected Token - Vue.js, after implementing vue-gallery (Blueimp Gallery for vue)

1 Answers