i18next not working with RequireJS

StackOverflow https://stackoverflow.com/questions/17990887

  •  04-06-2022
  •  | 
  •  

Question

I'm developing an internationalized mobile application with RequireJS, Backbone and i18next. Here is a part of my source code :

require.config({
    paths: { 
        jquery:     'libs/jquery-1.8.2.min',
        jqm:     'libs/jquery.mobile-1.3.0.min',
        underscore: 'libs/underscore-min',
        backbone:   'libs/backbone-min',
        text:       'libs/require-text',
        fastclick:       'libs/fastclick',
        iscroll:       'libs/iscroll',
        modules:    '../modules',
        model:       '../model'
    },
    shim: {
        'libs/i18next.min': ['jquery']
    }
});

define(['app', 'jqm-config'], function(app) { 
    $(document).ready(function() { 
      console.log("DOM is ready");
    });

    app.initialize();

    require(["libs/i18next.min"], function(i18n) {
        console.log(i18n); // i18n is defined, object displayed in the console
        i18n.init({
            resGetPath: 'locales/en.json',
            getAsync: false
        }, function() {
            $("[data-i18n]").i18n();
        });
    });
});

document.addEventListener("deviceready", function(e) {
    console.log("[DEBUG] device is ready !");
}, false);

document.addEventListener("touchmove", function(e) {
    e.preventDefault();
}, false);

i18next is loaded successfully, the object i18n isn't undefined. The problem is that when I run the application, I have a message on the console saying that $(...).i18n is not a function. For example, the following code is working :

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 

        <script src="js/libs/jquery.js"></script>
        <script src="js/libs/i18next.js"></script>
    </head> 
<body>
    <h1 data-i18n="app.name"></h1>
    <p data-i18n="app.description"></p>

    <script type="text/javascript">
        $(document).ready(function() {
            $("[data-i18n]").i18n();
        });
    </script>
</body>
</html>

Does anyone know where is the problem ? Thanks :)

EDIT : here is my console log

DOM is ready // main.js (line 20)
Object { pluralExtensions={...}, sync={...}, functions={...}, more...} // main.js (line 26)
TypeError: $(...).i18n is not a function
    $("[data-i18n]").i18n(); // main.js (line 31)
Was it helpful?

Solution

I think you're using the 'default' i18next file. Have you tried to use the jQuery-AMD-i18next version?

If you've included the jQuery and AMD version, and it worked, please visit: http://i18next.com/pages/doc_jquery.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top