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

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

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

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

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

28888閲覧

Uncaught SyntaxError: Unexpected token export

syoyu

総合スコア13

Vue.js

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

Onsen UI

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

Monaca

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

0グッド

1クリップ

投稿2018/01/08 07:44

編集2018/01/08 08:01

###前提・実現したいこと
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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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の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などのファイルも含みますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問