Неверный или неожиданный токен - Vue.js после реализации vue-gallery (Blueimp Gallery для vue)

Question

Я пытаюсь реализовать vue-gallery в vue.js, который я создал с помощью nuxt.js.

Я следил за различными примерами и ответами на вопросы Github, но безрезультатно.Я перехожу сюда, потому что исчерпал свои текущие возможности решения проблем и поиска в Google:)

================== ОБНОВЛЕНИЕ Новое сообщение об ошибке:

warning in ./plugins/vue-gallery.js

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

Я обновил nuxt.config.js, чтобы он выглядел так:

  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)/
        })
      }
    }
  },

И я попытался обновить vue-gallery.js, чтобы посмотреть, смогу ли я исправить проблему экспорта по умолчанию, вот так:

импорт Vue из 'vue' импорт VueGallery из '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')
}

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

Код репо доступен по адресу:

https://bitbucket.org/earleymw/front-end-dev-test-1/src/master/ Ошибка в CLI:

✖ 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

Ошибка в браузере:

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

В настоящее время у меня есть файл '~ / plugins / vue-gallery.js', содержащий:

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')

и файл 'nuxt.config.js':

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

И в index.vue:

Answer 1

Я проверил локально и обнаружил, что такой ошибки не происходит.Вам не нужно добавлять его в транспорт.

И вы неправильно импортировали галерею vue. Vue.use для плагинов vue, тогда как VueGallery - это просто компонент, а не плагин.Итак, ваш код должен выглядеть следующим образом:

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

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

И, как вы можете видеть, вам не нужно проверять браузер, потому что вы уже установили ssr: false для этого плагина в конфигурации nuxt.