graphCMSというヘッドレスCMSのチュートリアルを行っています。
以下URLのものです。
https://docs.graphcms.com/tutorials/developers/beginners_guide_with_vue
そのチュートリアル通りにコーディングを進めていたのですが、
最後の最後で、以下Errorが発生し、コンパイルに失敗してしまいました。
Failed to compile. ./src/main.js Module build failed: SyntaxError: Unexpected character '' (17:2) 15 | const apolloProvider = new VueApollo({ 16 | defaultClient: apolloClient > 17 | }) | ^ 18 | 19 | new Vue({ 20 | el: '#app', @ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js
シンタックスエラーというのですが、エラー原因が分かりません。
error発生該当ファイル(main.js)は下記です。
import { ApolloClient } from 'apollo-client' import { HttpLink } from 'apollo-link-http' import { InMemoryCache } from 'apollo-cache-inmemory' import VueApollo from 'vue-apollo' import router from './router.js' const GRAPHCMS_API = 'https://api-apeast.graphcms.com/v1/cjlgmrqsb051401ehmtd45tsi/master' const apolloClient = new ApolloClient({ link: new HttpLink({ uri: GRAPHCMS_API }), cache: new InMemoryCache() }) Vue.use(VueApollo) const apolloProvider = new VueApollo({ defaultClient: apolloClient }) new Vue({ el: '#app', provide: apolloProvider.provide(), router, template: '<App/>', components: { App } })
また、webpack.config.jsonは以下の通りです。vue cliで作成したものを特に変更していません。
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ], }, { test: /.sass$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { // Since sass-loader (weirdly) has SCSS as its default parse mode, we map // the "scss" and "sass" values for the lang attribute to the right configs here. // other preprocessors should work out of the box, no loader config like this necessary. 'scss': [ 'vue-style-loader', 'css-loader', 'sass-loader' ], 'sass': [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ] } // other vue-loader options go here } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
その他、tutorialの全ファイルは以下リポジトリにあります。
https://github.com/kawamataryo/graphcms-tutorial
webpackの設定の問題かと思い、いろいろ調べてのですが、原因が分からず困っています。
お助け願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。