前提・実現したいこと
Nuxt2.4.0でvue-slickを利用したいです。
そこで、vue-slickをnpmでインストール後、npm run devでブラウザからNuxtへアクセスできるようにしたところ、下記のようなエラーメッセージが発生しました。
発生している問題・エラーメッセージ
SyntaxError Unexpected identifier
該当のソースコード
vue
1<template lang="pug"> 2 section 3 slick(:options='slickOptions') 4 a(href="http://placehold.it/200x100") 5 img(src="http://placehold.it/200x100") 6 a(href="http://placehold.it/200x100") 7 img(src="http://placehold.it/200x100") 8 a(href="http://placehold.it/200x100") 9 img(src="http://placehold.it/200x100") 10 a(href="http://placehold.it/200x100") 11 img(src="http://placehold.it/200x100") 12 a(href="http://placehold.it/200x100") 13 img(src="http://placehold.it/200x100") 14</template> 15 16<script> 17import Slick from 'vue-slick' 18 19export default { 20 components: { 21 Slick 22 }, 23 data() { 24 return { 25 slickOptions: { 26 slidesToShow: 3, 27 slidesToScroll: 1, 28 asNavFor: '.slider-for', 29 dots: true, 30 centerMode: true, 31 focusOnSelect: true 32 } 33 } 34 } 35} 36</script> 37
試したこと
webpack-nodes-modulesをインストールし、nodeExternalを利用してvue-slickモジュールを除外したところ、このようなエラーが発生しました。
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') const pkg = require('./package') module.exports = { mode: 'universal', /* ** Headers of the page */ head: { title: pkg.name, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ '~/assets/style/app.styl' ], /* ** Plugins to load before mounting the App */ plugins: [ '@/plugins/vuetify', {src: '@/plugins/code-mirror', mode: 'client'}, {src: '@/plugins/trix-editor', mode: 'client'} ], /* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/pwa' ], /* ** Axios module configuration */ axios: { // See https://github.com/nuxt-community/axios-module#options }, /* ** Build configuration */ build: { transpile: ['vuetify/lib'], plugins: [new VuetifyLoaderPlugin()], loaders: { stylus: { import: ['~assets/style/variables.styl'] } }, /* ** You can extend webpack config here */ extend(config, ctx) { if (ctx.isServer) { config.externals = [ require('webpack-node-externals')({ whitelist: [/^vue-slick/] }) ] } // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } } }
補足情報(FW/ツールのバージョンなど)
node: v10.12.0
npm: 6.9.0
Nuxt: 2.4.0
あなたの回答
tips
プレビュー