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

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

ただいまの
回答率

90.53%

  • Monaca

    975questions

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

  • i18n

    16questions

    i18n(Internationalization)とは、ユーザーの国や文化によってソフトウェアの反応を変えることで国際化を図るテクニックやツールのことを言います。

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

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 204

kumakake

score 22

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してくれます。

よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

check解決した方法

+1

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/03 18:47

    解決してよかったですね。
    ちなみにサポートからのメールにはどんな趣旨で書かれていました?後学のために知りたいです。
    見せても良い部分があれば転記して頂けると嬉しいです。

    - 読み込むファイルは基本的には*.min.jsだけで、ソース読みたいときは*.min.jsの元になっているファイル…て感じでしょうか?

    キャンセル

  • 2018/07/03 21:04

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

    上記の「rollup.config.js」は、「rollup」環境で利用するため、
    「loader.js」に組み込んでも利用することはできません。

    「loader.js」に「rollup.config.js」を組み込んだ場合は、
    今回ご連絡いただきましたようなエラーが表示されます。
    ---

    キャンセル

  • 2018/07/03 21:31

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/01 01:37

    onsenUIのminimamです。

    キャンセル

  • 2018/07/01 02:05

    念の為、正確に書いて下さい。
    Onsen UI V2 JS Minimum?

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

    キャンセル

  • 2018/07/01 02:59

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

    キャンセル

  • 2018/07/01 08: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

    キャンセル

0

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

<!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/onsenui/js/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.ready(function() {
      console.log("Onsen UI is ready!");
    });
  </script>
</head>
<body>
  This is a template for Onsen UI app.
</body>
</html>
  1. まずはもう一度まっさらな状態でプロジェクトを作りなおしてみては?

  2. なぜ以下の2つを読み込んでいますか?
    components/jquery-i18next/jquery-i18next.js
    components/jquery-i18next/jquery-i18next.min.js

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

import babel from 'rollup-plugin-babel';
※この指摘はカンです。試してみて下さい。

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

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

  1. Monaca標準のプラグインで代用できませんか?
    https://docs.monaca.io/ja/reference/cordova_6.5/globalization/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/01 23:34

    エラーはプレビューしたときに表示されます。

    1)まずはもう一度まっさらな状態でプロジェクトを作りなおしてみては?
    →やってみます。

    2)なぜ以下の2つを読み込んでいますか?
    components/jquery-i18next/jquery-i18next.js
    components/jquery-i18next/jquery-i18next.min.js
    →特に理由はありません。

    3)jquery-i18nextのなかで、以下のメッセージから追加したほうがよさそうなものがありませんか?
    import babel from 'rollup-plugin-babel';
    ※この指摘はカンです。試してみて下さい。
    →"rollup"などで探しては見たのですが、出会えませんでした。

    4)3つのJS/CSSコンポーネントが必要なのは何から判断しました?また判断したのになぜ1つだけに削りました?
    国際化のためにjquery-i18next,i18next,i18next-xhr-backend
    →もともとは3つとも読み込んでいたのですが、どこでエラーが出るのかと思い外していました。

    5)Monaca標準のプラグインで代用できませんか?
    https://docs.monaca.io/ja/reference/cordova_6.5/globalization/
    →こちらは気が付きませんでした。
     やってみます。

    キャンセル

  • 2018/07/02 00:52

    2)なぜ以下の2つを読み込んでいますか?
    components/jquery-i18next/jquery-i18next.js
    components/jquery-i18next/jquery-i18next.min.js

    minify javascriptでググって、意味をしらべてみましょう。
    実際どんなものかをwww/components/jquery-i18next で各ソースを見比べてみましょう

    3)jquery-i18nextのなかで、以下のメッセージから追加したほうがよさそうなものがありませんか?
    import babel from 'rollup-plugin-babel';
    ※この指摘はカンです。試してみて下さい。

    JS/CSSコンポーネントで似た名前がありませんか?
    ただ、上記www/components/jquery-i18next に入っているsample.htmlを見ると使ってないのかなぁ。試してみて下さい。

    )3つのJS/CSSコンポーネントが必要なのは何から判断しました?また判断したのになぜ1つだけに削りました?
    国際化のためにjquery-i18next,i18next,i18next-xhr-backend
    →もともとは3つとも読み込んでいたのですが

    エラーも切り分けで外したんですね。

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

関連した質問

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

  • Monaca

    975questions

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

  • i18n

    16questions

    i18n(Internationalization)とは、ユーザーの国や文化によってソフトウェアの反応を変えることで国際化を図るテクニックやツールのことを言います。