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

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

ただいまの
回答率

90.86%

  • Monaca

    893questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Vue.js

    466questions

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

  • Onsen UI

    299questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Uncaught SyntaxError: Unexpected token export

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 858

syoyu

score 7

前提・実現したいこと

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


というエラーが出ました。

該当のソースコード

<head>
  <link rel="stylesheet" type="text/css" href="m_calendar.css">
</head>

<body>
<template>

    <v-ons-page>
    <div>
      <custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>
    </div>
    <div>
      <p style="text-align: center">
        Welcome home.
      </p>
    </div>

      <div id="app">
    <div id="calendar-nav">
        <i class="glyphicon glyphicon-menu-left" v-on="click: moveLastMonth"></i>
        <span>{{calData.year}} - {{getMonthName(calData.month)}}</span>
        <i class="glyphicon glyphicon-menu-right"  v-on="click: moveNextMonth"></i>
    </div>
    <table id="calendar" class="table table-bordered">
        <thead>
            <tr>
                <th v-repeat="week: weeks">{{week}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-repeat="week: calendar">
                <td v-repeat="day: week">{{day.day}}</td>
            </tr>
        </tbody>
    </table>
</div>


    </v-ons-page>
</template>
</body>
//brach
<script>
  import customToolbar from './toolbar'
  export default {
    props: ['toggleMenu'],
    components: { customToolbar }
  }

  import calendar from './m_calendar'
</script>
<script>

import Vue from 'vue';

Vue.component('app',{
    data: function() {
      return{
        weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        calData: {year: 0, month: 0}
    }},
    created: function (){
        var date = new Date();
        this.calData.year = date.getFullYear();
        this.calData.month = date.getMonth() + 1;
    },
    methods: {
        getMonthName: function(month) {
            var monthName = ['January','February','March','April','May','June','July','August','September','October','November','December'];
            return monthName[month - 1];
        },
        moveLastMonth: function() {
            if (this.calData.month == 1) {
                this.calData.year--;
                this.calData.month = 12;
            }
            else {
                this.calData.month--;
            }
        },
        moveNextMonth: function() {
            if (this.calData.month == 12) {
                this.calData.year++;
                this.calData.month = 1;
            }
            else {
                this.calData.month++;
            }
        }
    },
    computed: {
        calendar: function () {
            // 1日の曜日
            var firstDay = new Date(this.calData.year, this.calData.month - 1, 1).getDay();
            // 晦日の日にち
            var lastDate = new Date(this.calData.year, this.calData.month, 0).getDate();
            // 日にちのカウント
            var dayIdx = 1;

            var calendar = [];
            for (var w = 0; w < 6; w++) {
                var week = [];

                // 空白行をなくすため
                if (lastDate < dayIdx) {break;}

                for (var d = 0; d < 7; d++) {
                    if (w == 0 && d < firstDay) {
                        week[d] = {day: ''};
                    } else if (w == 6 && lastDate < day) {
                        week[d] = {day: ''};
                        dayIdx++;
                    } else if (lastDate < dayIdx) {
                        week[d] = {day: ''};
                        dayIdx++;
                    } else {
                        week[d] = {day: dayIdx};
                        dayIdx++;
                    }
                }

                calendar.push(week);
            }
            return calendar;
        }
    }
});

  </script>
/* カレンダーナビのスタイル */
#calendar-nav {
    text-align: center;
}

#calendar-nav span {
    display: inline-block;
    width: 200px;
}

#calendar-nav i:hover {
    cursor: pointer;
}

/* カレンダーのスタイル */
.table th, td{
    text-align: center;
}

#calendar th:first-child {
    background-color: #FEEEFF;
}
#calendar td:first-child {
    background-color: #FEEEFF;
}
#calendar th:nth-child(7) {
    background-color: #DFFFFF
}
#calendar td:nth-child(7) {
    background-color: #DFFFFF
}

#calendar td:hover {
    opacity: 0.6;
}

試したこと

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

参考URL

https://qiita.com/shin1x1/items/a5fa4f163e3565eba3bf

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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は使用可能になります。

<script type="module">
  import customToolbar from './toolbar.js';
  ...
</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/09 17:50

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

    キャンセル

  • 2018/01/09 20: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の置いてあるディレクトリ内のファイル一覧

    キャンセル

  • 2018/01/09 21:02

    詳しくありがとうございます。
    monacaでファイルを作成した際にwebpack.prod.config.jsとwebpack.dev.config.jsの2つのファイルが作成されており、どちらを変更するのか、両方なのかがわかりません。両方の設定は以下になります。
    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などのファイルも含みますか?

    キャンセル

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • Monaca

    893questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Vue.js

    466questions

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

  • Onsen UI

    299questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。