質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

3921閲覧

webpackでModule build failed: SyntaxError: Unexpected character '​'

RyoKawamata

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/09/02 02:22

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の設定の問題かと思い、いろいろ調べてのですが、原因が分からず困っています。
お助け願います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

コピペの際に理由はわからないのですが、変な文字コードが挿入されていたことが原因でした。
コードを打ち直したら動きました。

投稿2018/09/02 04:21

RyoKawamata

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問