RequireJS isn't working for me

2
votes

I'm working on a personal project and I'm using a lot of JavaScript code and working with a few libraries and plugins like jQuery and Velocity.js. I don't know why I can't make it working, I've followed the RequireJS documentation and a lot of tutorials, but I'm always getting errors in the console.

This is how my website's depository is like:

Main folder
  |
  |index.html
  |
  |
  |——JS folder ——
         |
         |require.js
         |config.js
         |main.js
         |
         |————————

In index.html I'm calling the RequireJS in this way

<script data-main="js/config" src="js/require.js"></script>

And in the config I have the paths for each CDN depositories, like this:

requirejs.config({
"baseUrl": "js",
"paths": {
  "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js",
  "velocity": "//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js",
  "velocity-ui": "//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js",
  "bootstrap": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js",
  "main": "main"
}
});

In the same file (config.js), after closing the requirejs.config I'm calling my main.js file in this way:

require(['main']);

And inside the main.js I'm using jquery, velocity and velocity-ui. 

require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) {
 //my code here
 });

After that, I'm always getting errors in console, like 

Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
---
Error: Script error for: velocity
http://requirejs.org/docs/errors.html#scripterror
---
Error: Script error for: velocity-ui
http://requirejs.org/docs/errors.html#scripterror

I don't know what I'm doing wrong ...

2
jqueryrequirejscdnvelocity.js
Have you tried to give url:s for required libs with http: involved to the path. Especially when running from file the // traducts to file:// which obviously is not what you want to. – mico
I've also tried and doesn't work neither – Juan Rivas
What happens if you had the .js extension to "main" in your config? – Anthony Forloney
It give me an error, because it would search for a file named "main.js.js" – Juan Rivas

2 Answers

2
votes

You should remove the .js extension in your path. Requirejs Doc says

The path that is used for a module name should not include an extension, since the path mapping could be for a directory. The path mapping code will automatically add the .js extension when mapping the module name to a path.

So change code in config.js to the following: 

requirejs.config({
    "baseUrl": "js",
    "paths": {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min",
        "velocity": "//cdn.jsdelivr.net/velocity/1.2.2/velocity.min",
        "velocity-ui": "//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min",
        "bootstrap": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min",
        "main": "main"
    }
});

require(['main']);
0
votes

You're not using require.js correct. You should have only one require() call and give it a callback. All the rest of your project's files should be wrapped with define().

Example:

main.js should look like:

define([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) {
    //my code here
    // return something
});

and in config.js you should have something like:

require(['main'], function (main) {
    // do something with main module... like init stuff...
});