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

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

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

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

受付中

vue-fullcalendar

syoyu
syoyu

総合スコア13

Vue.js

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

0回答

0リアクション

0クリップ

297閲覧

投稿2018/03/12 14:06

編集2018/03/13 16:11

https://github.com/CroudSupport/vue-fullcalendarを実装しようとしています。
ビルドしてみたところ、Uncaught SyntaxError: Unexpected identifierというエラーが出ました。調べてみたのですが理由不明です。エラー箇所はnode_modules/vue-full-calendar/components/FullCalendar.vueというファイルのimport FullCalendar from './components/FullCalendar.vue'という箇所で起きているみたいです。

node_modules/~/FullCalendar.vue

<template> <div ref="calendar" id="calendar"></div> </template> <script> import defaultsDeep from 'lodash.defaultsdeep' import 'fullcalendar' import $ from 'jquery' export default { props: { events: { default() { return [] }, }, eventSources: { default() { return [] }, }, editable: { default() { return true }, }, selectable: { default() { return true }, }, selectHelper: { default() { return true }, }, header: { default() { return { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' } }, }, defaultView: { default() { return 'agendaWeek' }, }, sync: { default() { return false } }, config: { type: Object, default() { return {} }, }, }, computed: { defaultConfig() { const self = this return { header: this.header, defaultView: this.defaultView, editable: this.editable, selectable: this.selectable, selectHelper: this.selectHelper, aspectRatio: 2, timeFormat: 'HH:mm', events: this.events, eventSources: this.eventSources, eventRender(...args) { if (this.sync) { self.events = cal.fullCalendar('clientEvents') } self.$emit('event-render', ...args) }, eventDestroy(event) { if (this.sync) { self.events = cal.fullCalendar('clientEvents') } }, eventClick(...args) { self.$emit('event-selected', ...args) }, eventDrop(...args) { self.$emit('event-drop', ...args) }, eventResize(...args) { self.$emit('event-resize', ...args) }, dayClick(...args){ self.$emit('day-click', ...args) }, select(start, end, jsEvent, view, resource) { self.$emit('event-created', { start, end, allDay: !start.hasTime() && !end.hasTime(), view, resource }) } } }, }, mounted() { const cal = $(this.$el), self = this this.$on('remove-event', (event) => { if(event && event.hasOwnProperty('id')){ $(this.$el).fullCalendar('removeEvents', event.id); }else{ $(this.$el).fullCalendar('removeEvents', event); } }) this.$on('rerender-events', () => { $(this.$el).fullCalendar('rerenderEvents') }) this.$on('refetch-events', () => { $(this.$el).fullCalendar('refetchEvents') }) this.$on('render-event', (event) => { $(this.$el).fullCalendar('renderEvent', event) }) this.$on('reload-events', () => { $(this.$el).fullCalendar('removeEvents') $(this.$el).fullCalendar('addEventSource', this.events) }) this.$on('rebuild-sources', () => { $(this.$el).fullCalendar('removeEventSources') this.eventSources.map(event => { $(this.$el).fullCalendar('addEventSource', event) }) }) cal.fullCalendar(defaultsDeep(this.config, this.defaultConfig)) }, methods: { fireMethod(...options) { return $(this.$el).fullCalendar(...options) }, }, watch: { events: { deep: true, handler(val) { $(this.$el).fullCalendar('removeEvents') $(this.$el).fullCalendar('addEventSource', this.events) }, }, eventSources: { deep: true, handler(val) { this.$emit('rebuild-sources') }, }, }, beforeDestroy() { this.$off('remove-event') this.$off('rerender-events') this.$off('refetch-events') this.$off('render-event') this.$off('reload-events') this.$off('rebuild-sources') }, } </script>

webpack.dev.config.js

js

try { var path = require('path'); var os = require('os'); var cordovaNodeModules = path.join(os.homedir(), '.cordova', 'node_modules'); var webpack = require(path.join(cordovaNodeModules, 'webpack')); var HtmlWebpackPlugin = require(path.join(cordovaNodeModules, 'html-webpack-plugin')); var ExtractTextPlugin = require(path.join(cordovaNodeModules, 'extract-text-webpack-plugin')); var ProgressBarPlugin = require(path.join(cordovaNodeModules, 'progress-bar-webpack-plugin')); var cssnext = require(path.join(cordovaNodeModules, 'postcss-cssnext')); var postcssImport = require(path.join(cordovaNodeModules, 'postcss-import')); var postcssUrl = require(path.join(cordovaNodeModules, 'postcss-url')); } catch (e) { throw new Error('Missing Webpack Build Dependencies.'); } module.exports = { devtool: 'inline-source-map', context: __dirname, debug: true, cache: true, entry: [ 'webpack/hot/only-dev-server', './src/main' ], output: { path: path.join(__dirname, 'www'), filename: 'bundle.js', publicPath:'/' }, resolve: { root: [ path.join(__dirname, 'src'), path.join(__dirname, 'node_modules'), path.resolve(cordovaNodeModules) ], extensions: ['', '.js', '.vue', '.json', '.css', '.html', '.styl'], unsafeCache: true, alias: { vue:'vue/dist/vue.common.js' }, }, module: { loaders: [{ test: /.vue$/, loader: 'vue-loader' }, { test: /.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /.html$/, loader: 'html' }, { test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(?\S*)?$/, loader: 'file?name=assets/[name].[hash].[ext]' }, { test: /.css$/, include: [ path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'), path.join(__dirname, 'src') ], loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1&-raw!postcss-loader') }, { test: /.css$/, exclude: [ path.join(__dirname, 'node_modules', 'onsenui', 'css-components-src', 'src'), path.join(__dirname, 'src') ], loader: ExtractTextPlugin.extract('style', 'css?sourceMap') }, { test: /.json$/, loader: 'json' }] }, vue: { loaders: { js: 'babel' } }, babel: { presets: [ path.join(cordovaNodeModules, 'babel-preset-es2015') ], }, postcss: function() { return [ postcssImport, postcssUrl, cssnext({ browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'] }) ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin('[name].css'), new HtmlWebpackPlugin({ template: 'src/public/index.html.ejs', chunksSortMode: 'dependency' }), new ProgressBarPlugin() ], resolveLoader: { root: [ path.join(__dirname, 'node_modules'), cordovaNodeModules ] }, devServer: { contentBase: './src/public', colors: true, inline: true, historyApiFallback: true, host: '0.0.0.0', stats: 'minimal', hot: true } };

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

karamarimo

2018/03/13 02:51

ビルドのコンフィグファイルを載せたほうがいいと思います(webpack なら webapck.config.js みたいな名前のファイル)。
syoyu

2018/03/13 15:57

追記します。ご指摘ありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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