###前提・実現したいこと
vue.jsを用いてmonacaでカレンダーアプリを作成しています。
https://kuroeveryday.blogspot.jp/2015/07/vuejs-calendar.html
上記のサイトのカレンダーを利用しようとしています。

###発生している問題・エラーメッセージ

[Vue warn]: Failed to mount component: template or render function not defined.

というエラーが出たので、調べたところ、webpackがランタイム版では動かないとのことらしく、スタンドアロン版に変更するために、webpack.dev.config.jsとweb pack.prod.config.jsの
module expotes内のresolve内のaliasをvue/dist/vue.esm.jsに変更しました。すると、
(追記)勘違いしており、vue.esm.jsはランタイム版でした。もともとvue.common.js（スタンドアロン版）になっていた時に上記のエラーが出て、vue.esm.jsに変更したところ出なくなり、その後vue.common.jsに戻しても上記のエラーは再発しませんでした。

Uncaught SyntaxError: Unexpected token export

というエラーが出ました。
###該当のソースコード

html
1<head>
2  <link rel="stylesheet" type="text/css" href="m_calendar.css">
3</head>
4
5<body>
6<template>
7
8    <v-ons-page>
9    <div>
10      <custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>
11    </div>
12    <div>
13      <p style="text-align: center">
14        Welcome home.
15      </p>
16    </div>
17
18      <div id="app">
19    <div id="calendar-nav">
20        <i class="glyphicon glyphicon-menu-left" v-on="click: moveLastMonth"></i>
21        <span>{{calData.year}} - {{getMonthName(calData.month)}}</span>
22        <i class="glyphicon glyphicon-menu-right"  v-on="click: moveNextMonth"></i>
23    </div>
24    <table id="calendar" class="table table-bordered">
25        <thead>
26            <tr>
27                <th v-repeat="week: weeks">{{week}}</th>
28            </tr>
29        </thead>
30        <tbody>
31            <tr v-repeat="week: calendar">
32                <td v-repeat="day: week">{{day.day}}</td>
33            </tr>
34        </tbody>
35    </table>
36</div>
37
38
39    </v-ons-page>
40</template>
41</body>
42//brach
43<script>
44  import customToolbar from './toolbar'
45  export default {
46    props: ['toggleMenu'],
47    components: { customToolbar }
48  }
49
50  import calendar from './m_calendar'
51</script>

js
1<script>
2
3import Vue from 'vue';
4
5Vue.component('app',{
6    data: function() {
7      return{
8        weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
9        calData: {year: 0, month: 0}
10    }},
11    created: function (){
12        var date = new Date();
13        this.calData.year = date.getFullYear();
14        this.calData.month = date.getMonth() + 1;
15    },
16    methods: {
17        getMonthName: function(month) {
18            var monthName = ['January','February','March','April','May','June','July','August','September','October','November','December'];
19            return monthName[month - 1];
20        },
21        moveLastMonth: function() {
22            if (this.calData.month == 1) {
23                this.calData.year--;
24                this.calData.month = 12;
25            }
26            else {
27                this.calData.month--;
28            }
29        },
30        moveNextMonth: function() {
31            if (this.calData.month == 12) {
32                this.calData.year++;
33                this.calData.month = 1;
34            }
35            else {
36                this.calData.month++;
37            }
38        }
39    },
40    computed: {
41        calendar: function () {
42            // 1日の曜日
43            var firstDay = new Date(this.calData.year, this.calData.month - 1, 1).getDay();
44            // 晦日の日にち
45            var lastDate = new Date(this.calData.year, this.calData.month, 0).getDate();
46            // 日にちのカウント
47            var dayIdx = 1;
48
49            var calendar = [];
50            for (var w = 0; w < 6; w++) {
51                var week = [];
52
53                // 空白行をなくすため
54                if (lastDate < dayIdx) {break;}
55
56                for (var d = 0; d < 7; d++) {
57                    if (w == 0 && d < firstDay) {
58                        week[d] = {day: ''};
59                    } else if (w == 6 && lastDate < day) {
60                        week[d] = {day: ''};
61                        dayIdx++;
62                    } else if (lastDate < dayIdx) {
63                        week[d] = {day: ''};
64                        dayIdx++;
65                    } else {
66                        week[d] = {day: dayIdx};
67                        dayIdx++;
68                    }
69                }
70
71                calendar.push(week);
72            }
73            return calendar;
74        }
75    }
76});
77
78  </script>

css
1/* カレンダーナビのスタイル */
2#calendar-nav {
3    text-align: center;
4}
5
6#calendar-nav span {
7    display: inline-block;
8    width: 200px;
9}
10
11#calendar-nav i:hover {
12    cursor: pointer;
13}
14
15/* カレンダーのスタイル */
16.table th, td{
17    text-align: center;
18}
19
20#calendar th:first-child {
21    background-color: #FEEEFF;
22}
23#calendar td:first-child {
24    background-color: #FEEEFF;
25}
26#calendar th:nth-child(7) {
27    background-color: #DFFFFF
28}
29#calendar td:nth-child(7) {
30    background-color: #DFFFFF
31}
32
33#calendar td:hover {
34    opacity: 0.6;
35}
36

###試したこと
検索してみてもわかりませんでした。初歩的な質問で申し訳ないのですが、教えていただけると幸いです。

###参考URL
https://qiita.com/shin1x1/items/a5fa4f163e3565eba3bf

行動規範の内容に同意します

回答1件

ベストアンサー

import / exportは、ES2015(新しいバージョンのJavaScript)の構文で、ブラウザ上でそのまま動かすにはいくつか条件があります。
(こちらについての詳細は、補足として回答下部に示させていただきました。)

Webpackを使うと、このimport / exportを解釈して、複数ファイルに分かれたモジュールを、一つのファイルにバンドルしてくれます。
バンドルされたコードからは"import / export"は取り除かれ、通常通りscriptタグで読み込むだけで動くコードになります。

今回の件の解決策としては、
・import / exportを使うJavaScriptのコードを全てWebpackの管理下に置き、バンドルされたコードをHTML内で読み込むようにする
・HTML内に直接import / exportを記述しないようにする
事かと思います。

補足: import / exportをブラウザ上でそのまま使うには

1.対応ブラウザである事
https://caniuse.com/#feat=es6-module
こちらの表で緑色になっているブラウザ(現在はChrome 61~, Safari 10.1~, Edge 16~)で使うことが出来ます。

2.scriptタグでtype="module"を指定すること
type="module"になっている場合だけ、import / exportは使用可能になります。

html
1<script type="module">
2  import customToolbar from './toolbar.js';
3  ...
4</script>

MDNの説明 (https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#attr-type)
詳しい記事 (http://postd.cc/the-state-of-javascript-modules/#gfm-3)

ただし、現状ではメジャーブラウザで対応していないものがある(Firefox, IEで動きません)ため、そのまま使う事はおすすめしません。
また、今回はWebpackを使われているようですので、そちらの管理下に置くのが一番楽そうです

投稿2018/01/08 14:39

syumai

総合スコア83

syoyu

2018/01/09 08:50

回答ありがとうございます。 import/exportの仕様について詳しく教えていただきありがとうございます。今回は、import/exportを用いているファイル全てをwebpackの管理下に置くという対処をとろうと思うのですが、調べてみた結果よくわかりませんでした。もしよければその方法も教えていただけませんか？

syumai

2018/01/09 11:13 編集

方法としては、・webpack.config.jsで、entryに設定したファイルの中から、使いたいコードをimportするようにする・webpack.config.jsで、outputに設定された出力ファイルを、HTML内で読み込む(<script src="./dist/bundle.js"></script>など) ことになります。こちらについては、Vue.jsと言うより、Webpackの知識が必要になります。 Webpackの入門については、こちらの記事がわかりやすいと思います。 https://qiita.com/soarflat/items/28bf799f7e0335b68186 または、下記の2つをいただければ具体的に回答可能です。・webpack.config.jsの、entry, outputの設定・JS, HTMLの置いてあるディレクトリ内のファイル一覧

syoyu

2018/01/09 12:02

詳しくありがとうございます。 monacaでファイルを作成した際にwebpack.prod.config.jsとwebpack.dev.config.jsの２つのファイルが作成されており、どちらを変更するのか、両方なのかがわかりません。両方の設定は以下になります。 webpack.prod.config.js ``` entry: { app: './src/main', vendor: ['vue'] }, output: { path: path.join(__dirname, 'www'), filename: '[name].bundle.js', chunkFilename: '[name].chunk.js' }, ``` webpack.dev.config.js ``` entry: [ 'webpack/hot/only-dev-server', './src/main' ], output: { path: path.join(__dirname, 'www'), filename: 'bundle.js', publicPath:'/' }, ``` 「JS, HTMLの置いてあるディレクトリ内のファイル一覧」とは自分が書いているファイルのことですか？それともmonacaで自動生成されたsrcやwwwなどのファイルも含みますか？

行動規範の内容に同意します