Using JQuery inside modules with Require.js

Question

I want to use jQuery with require.js and I got some problem I need to use jQuery inside module1 & 2

The require.js is working well but not able to load jquery

This is the index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Basic example of requireJS integration</title>
</head>
<body>
<div id="container">
    <p>Check console and js files</p>
</div>
<script data-main="js/main" src="js/vendor/require.js"></script>
</body>
</html>

this is the main.js

// Load modules and use them

    requirejs.config({
        path: {
            'jquery': '../js/vendor/jquery-3.1.1.min',
        }
    });
require(['module1', 'module2'], function (module1, module2) {
    debugger;
    console.log(module2.testMod1() + " " + module2.testMod2());
});

This is module1

define([], function () {
    return {
        doSomething: function () {
            return 'something';
        }
    };

});

This is module2

define(['module1', jquery], function (module1, $) {
    return {
        testMod1: function () {
            debugger;
            console.log("jquery obj" + $);
            return module1.doSomething();
        },
        testMod2: function () {
            return "something 2"
        }

    };

});

I read this but not able to make it work...what am I doing wrong here ? Correct way to implement jQuery with require.js

update: still after changing like Michael Sacket answer, having same issue this is my project structure

Now the error is:

require.js:168 Uncaught Error: Script error for "jquery", needed by: module2
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:168)
    at HTMLScriptElement.onScriptError (require.js:1735)

Possible duplicate of [Correct way to implement jQuery with require.js](http://stackoverflow.com/questions/15613577/correct-way-to-implement-jquery-with-require-js) — Yosef Weiner, Dec 24 '16 at 21:24
@SkinnyJ - No if you read my question you can see that I try this and still not working ... — John Jerrby, Dec 24 '16 at 21:30
@SkinnyJ - you give the link that I already put in the question... — John Jerrby, Dec 24 '16 at 21:31

Michael Sacket · Answer 1 · 2016-12-26T01:17:02.660

1

You have a couple of problems. First, your RequireJS configuration should be outside of the require() function.

requirejs.config({
    paths: {
        'jquery': '../js/vendor/jquery-3.1.1.min',
    }
});
require(['module1', 'module2'], function (module1, module2) {
    console.log(module2.testMod1() + " " + module2.testMod2());
});

Your function is trying to load module1 and module2 before it does any configuration.

Secondly, you should rename your jQuery module to be all lowercase so that it doesn't conflict with the global jQuery.

define(['module1', 'jquery'], function (module1, $) {
    return {
        testMod1: function () {
            debugger;
            console.log("jquery obj" + $);
            return module1.doSomething();
        },
        testMod2: function () {
            return "something 2"
        }
    };
});

edited Dec 26 '16 at 01:17

answered Dec 24 '16 at 21:50

Michael Sacket

897
8
13

thanks , change it like you said and now the error is :require.js:168 Uncaught Error: Script error for "jquery", needed by: module2 http://requirejs.org/docs/errors.html#scripterror at makeError (require.js:168) at HTMLScriptElement.onScriptError (require.js:1735) – John Jerrby Dec 24 '16 at 22:12
please see my update I added there the proj structure ... – John Jerrby Dec 24 '16 at 22:12

score 1 · Answer 2 · answered Dec 25 '16 at 08:46

1

I think you should change the path in the require.config to paths

answered Dec 25 '16 at 08:46

Tals

121
3

Using JQuery inside modules with Require.js

2 Answers2