I am trying to get my hands on require.js which is new for me but I cannot have it work. After having followed some simple tutorials for beginners, I proceeded to create my first (fairly simple project).
I am using visual studio 2013 (as I am a guy) This is a quick way on my file structure
./content
/*a bunch of css files*
./Scripts
/jquery-1.9.1.js
/sandbox.js (!! my library !!)
.index.html (on the root)
.app.js (on the root)
Here is my module: sandbox.js
//sandbox.js
require.config({
paths:{
"jquery":"/Scripts/jquery-1.9.1"
}
});
define(["jquery"], function($){
var show_name = function(n){
alert(n);
};
return{
showName : display_name
}
});
And now in the app.js I make use of the module sandbox.js. Here is how
// app.js
require(["/Scripts/sandbox"], function(sandbox){
sandbox.showName('John');
});
Finally in the index.html, I load my require.js file:
<!DOCTYPE html>
<html xmlns="">
<head>
<title></title>
</head>
<body>
<script src="/Scripts/require.js" data-main="/Scripts/sandbox"></script>
<script src="app.js"></script>
</body>
</html>
I am trying to get my hands on require.js which is new for me but I cannot have it work. After having followed some simple tutorials for beginners, I proceeded to create my first (fairly simple project).
I am using visual studio 2013 (as I am a guy) This is a quick way on my file structure
./content
/*a bunch of css files*
./Scripts
/jquery-1.9.1.js
/sandbox.js (!! my library !!)
.index.html (on the root)
.app.js (on the root)
Here is my module: sandbox.js
//sandbox.js
require.config({
paths:{
"jquery":"/Scripts/jquery-1.9.1"
}
});
define(["jquery"], function($){
var show_name = function(n){
alert(n);
};
return{
showName : display_name
}
});
And now in the app.js I make use of the module sandbox.js. Here is how
// app.js
require(["/Scripts/sandbox"], function(sandbox){
sandbox.showName('John');
});
Finally in the index.html, I load my require.js file:
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="/Scripts/require.js" data-main="/Scripts/sandbox"></script>
<script src="app.js"></script>
</body>
</html>
But when I run this code I get the error
0x800a139e - JavaScript runtime error: Script error for: /Scripts/sandbox http://requirejs/docs/errors.html#scripterror
This error occurs in the app.js
require(['/Scripts/sandbox'], function (sandbox) {
sandbox.showName("John");
});
Obviously there is something wrong in my way of caling and using the module sandbox.js. But I cannot figure out what the error.
Any help would be greatly appreciated.
Share Improve this question edited Sep 11, 2015 at 5:13 TheSoul asked Sep 10, 2015 at 23:10 TheSoulTheSoul 5,37614 gold badges48 silver badges83 bronze badges 1-
I believe you should use
define
instead ofrequire
– Domysee Commented Sep 14, 2015 at 13:26
2 Answers
Reset to default 3- First of all, you should change all
/Scripts/*
toScripts/*
. - Second thing is, you have set your data-main to
Scripts/sandbox
, that is, your baseUrl is set toScripts/
. So yourapp.js
should look like:
require(["sandbox"], function(sandbox){
sandbox.showName('John');
});
And your sandbox.js
should be:
require.config({
paths:{
"jquery":"jquery-1.9.1"
}
});
define(["jquery"], function($){
var show_name = function(n){
alert(n);
};
return{
showName : display_name
}
});
I have finally managed to make it work. In my app.js, it should be "['Scripts/sandbox.js']" and not "['Scripts/sandbox']". Hope this can help any one else with the same issue