monacaでjquery-i18nextがloader.jsでエラーになる

Mocanaの国際化のためにjquery-i18next,i18next,i18next-xhr-backendをjs/CSSコンポーネント画面で取り込んで利用しようとしています。

ところが、取り込んだだけの状態でプレビューをしようとしたところ下記のエラーが表示されます。

Uncaught SyntaxError: Unexpected token import loader.js:1484

loader.jsの1484行目は下記のように記載されています。

import babel from 'rollup-plugin-babel';

このエラーを回避するにはどのようにすればいいでしょうか？

少し前で、上記のようなコーディングになっていないloader.jsがあったので、入れ替えたところ、エラー無しでloadしてくれます。

よろしくお願いします。

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

回答4件

自己解決

Monacaのサポートに確認をして解決しました。
jquery-i18next.jp( or jquery-i18next.min.js)以外にindex.jsやrollup.config.jsを組み込んだことが原因でした。

投稿2018/07/03 07:24

編集2018/07/03 07:26

kumakake

総合スコア42

oikashinoa

2018/07/03 09:47

解決してよかったですね。ちなみにサポートからのメールにはどんな趣旨で書かれていました？後学のために知りたいです。見せても良い部分があれば転記して頂けると嬉しいです。 - 読み込むファイルは基本的には*.min.jsだけで、ソース読みたいときは*.min.jsの元になっているファイル…て感じでしょうか？

kumakake

2018/07/03 12:04

抜粋ですが、こんな感じです。 --- ご連絡いただきました内容より、「JS/CSSコンポーネントの追加と削除」から「jquery-i18next」を組み込む際に、「rollup」環境で使用する設定ファイル「rollup.config.js」を選択して組み込んでおりませんでしょうか。上記の「rollup.config.js」は、「rollup」環境で利用するため、「loader.js」に組み込んでも利用することはできません。「loader.js」に「rollup.config.js」を組み込んだ場合は、今回ご連絡いただきましたようなエラーが表示されます。 ---

oikashinoa

2018/07/03 12:31

ありがとうございました。

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

目指せ海外進出！Monacaアプリを多言語化する方法まとめ | webico

質問とは直接関係ない記事ですが、多言語化に向けての考慮点や苦労話が面白かったです。

投稿2018/07/01 15:28

oikashinoa

総合スコア2826

下がOnsen UI V2 JS Minimumプロジェクト作成して、お聞きしたJS/CSSコンポーネントを組み込んだ状態で特にエラー出ませんよ。あと、取り込んだだけの状態でプレビューではないですよね？行数が異なります。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22  This is a template for Onsen UI app.
23</body>
24</html>
25
26

まずはもう一度まっさらな状態でプロジェクトを作りなおしてみては？
なぜ以下の２つを読み込んでいますか？

components/jquery-i18next/jquery-i18next.js
components/jquery-i18next/jquery-i18next.min.js

jquery-i18nextのなかで、以下のメッセージから追加したほうがよさそうなものがありませんか？

import babel from 'rollup-plugin-babel';

※この指摘はカンです。試してみて下さい。

３つのJS/CSSコンポーネントが必要なのは何から判断しました？また判断したのになぜ１つだけに削りました？

国際化のためにjquery-i18next,i18next,i18next-xhr-backend

Monaca標準のプラグインで代用できませんか？

https://docs.monaca.io/ja/reference/cordova_6.5/globalization/

投稿2018/07/01 13:58

oikashinoa

総合スコア2826

kumakake

2018/07/01 14:34

エラーはプレビューしたときに表示されます。１）まずはもう一度まっさらな状態でプロジェクトを作りなおしてみては？ →やってみます。２）なぜ以下の２つを読み込んでいますか？ components/jquery-i18next/jquery-i18next.js components/jquery-i18next/jquery-i18next.min.js →特に理由はありません。３）jquery-i18nextのなかで、以下のメッセージから追加したほうがよさそうなものがありませんか？ import babel from 'rollup-plugin-babel'; ※この指摘はカンです。試してみて下さい。 →"rollup"などで探しては見たのですが、出会えませんでした。４）３つのJS/CSSコンポーネントが必要なのは何から判断しました？また判断したのになぜ１つだけに削りました？国際化のためにjquery-i18next,i18next,i18next-xhr-backend →もともとは３つとも読み込んでいたのですが、どこでエラーが出るのかと思い外していました。５）Monaca標準のプラグインで代用できませんか？ https://docs.monaca.io/ja/reference/cordova_6.5/globalization/ →こちらは気が付きませんでした。　やってみます。

oikashinoa

2018/07/01 15:52

２）なぜ以下の２つを読み込んでいますか？ components/jquery-i18next/jquery-i18next.js components/jquery-i18next/jquery-i18next.min.js minify javascriptでググって、意味をしらべてみましょう。実際どんなものかをwww/components/jquery-i18next　で各ソースを見比べてみましょう３）jquery-i18nextのなかで、以下のメッセージから追加したほうがよさそうなものがありませんか？ import babel from 'rollup-plugin-babel'; ※この指摘はカンです。試してみて下さい。 JS/CSSコンポーネントで似た名前がありませんか？ただ、上記www/components/jquery-i18next　に入っているsample.htmlを見ると使ってないのかなぁ。試してみて下さい。）３つのJS/CSSコンポーネントが必要なのは何から判断しました？また判断したのになぜ１つだけに削りました？国際化のためにjquery-i18next,i18next,i18next-xhr-backend →もともとは３つとも読み込んでいたのですがエラーも切り分けで外したんですね。

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

使ったテンプレートはなんですか？

投稿2018/06/30 15:57

oikashinoa

総合スコア2826

kumakake

2018/06/30 16:37

onsenUIのminimamです。

oikashinoa

2018/06/30 17:05

念の為、正確に書いて下さい。 Onsen UI V2 JS Minimum？あと、念の為ソースをあげて下さい。 > 取り込んだだけの状態でプレビューと有るので、ソースは何もいじっていないと思うのですが、こちらで試すとき、本当に一緒か確認する手段がソースしか無いので。

oikashinoa

2018/06/30 17:59

あと、JS/CSSコンポーネントで有効になっているコンポーネントの’設定’を記載してください。どれを読み込んでいるのか分かりません。

kumakake

2018/06/30 23:24

Onsen UI V2 JS Minimumです。ソース：index.html ---- <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap() .controller('HelloController', function() { this.world = 'World'; }); ons.ready(function() { console.log("Onsen UI is ready!"); }); </script> </head> <body> <ons-page ng-controller="HelloController as hello"> <ons-toolbar> <div class="center">Introduction</div> </ons-toolbar> <div class="content" style="margin: 10px;"> <p>What is your name?</p> <p> <ons-input modifier="underbar" ng-model="hello.world" placeholder="Your name" float></ons-input> </p> <p> Hello, {{ hello.world || 'stranger' }}! </p> </div> </ons-page> </body> </html> ----- JS/CSSコンポーネント ※jquery-i18nextでエラーとわかってから、i18next,i18next-xhr-backendを読み込んでいません。 Cordova (PhoneGap) Loader バージョン:1.0.0 jquery-i18next バージョン:1.2.1 下記を読み込んでいます components/jquery-i18next/index.js components/jquery-i18next/jquery-i18next.js components/jquery-i18next/jquery-i18next.min.js Monaca Core Utility バージョン:2.0.6

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

あなたの回答