I keep getting:
Uncaught TypeError: object is not a function
The first time:
<script>
require(['core/controller']);
</script>
The secondoccurrence is:
require.config({
paths: {
"jquery": [
"jquery"
],
'bootstrap': [
'bootstrap'
],
'kendo': [
'kendo'
],
handlebars: 'handlebars'
},
shim: {
"bootstrap": {
deps :["jquery"]
},
"kendo": {
deps: ["jquery"]
}
}
})
define('config', function (require) {
'use strict';
var module = require('module');
return module.config ? module.config() : {};
});
define('events', ['core/mini-events'], function(EventEmitter){
var events = new EventEmitter();
return events;
});
In my header I have:
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
<script data-main="/js/main.js" src="http://mbms.com/js/requirejs.js"></script>
The absolute URL that you mentioned in your script's src doesn't exist. As the host and the file do not exist, requirejs.js is not downloaded and any attempt to use require API will give you the error that you're getting now. As you're running this locally, I suggest you change your src like below
<script data-main="/js/main.js" src="/js/requirejs.js"></script>
As long as there's a js folder with requirejs.js file under your project root folder, then this change should work :)
[EDIT for clarity]
I tried the URL referenced in the script tag just now and it's not present. Check your debugger's Network console and you'll see the 404. Perhaps you meant:
http://requirejs.org/docs/release/2.1.16/minified/require.js
Related
I am new working with requirejs, I have an old Asp.net Webform application that I am trying to apply some javascript module loading using requirejs. In this app I am using a jquery plugin named Time Entry, but is not working if I use requirejs, only works if I added the reference the old way. Here is my requirejs configuration and declaration.
In the aspx file:
<script src="../../scripts/require.js"></script>
<script>
require(["../../app/shared/require.config"],
function (config) {
require(["appIncidentTracking/incident-type-init"]);
});
</script>
My require.config file is like this:
require.config({
baseUrl: '../../scripts',
paths: {
app: '../../app/utilization-management',
appIncidentTracking: '../../app/incident-tracking',
jquery: 'jquery-3.1.1.min',
jqueryui: 'jquery-ui-1.12.1.min',
jqueryplugin: '../../js/jquery.plugin.min',
timeentry:'../../js/jquery.timeentry.min',
handlebars: 'handlebars.amd.min',
text: 'text',
moment: 'moment.min',
datatable: 'DataTables/jquery.dataTables.min',
blockUI: 'jquery.blockUI.min',
shared: '../../app/shared',
bootstrap: 'bootstrap.min',
'bootstrap-datepicker': 'bootstrap-datepicker.min',
'bootstrap-multiselect': '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
bootstrap: {
deps: ['jquery']
},
'bootstrap-multiselect': {
deps: ['bootstrap']
},
timeentry: {
deps:['jquery', 'jqueryplugin']
}
}
});
and in my incident-type-init.js I only call the plugin:
/**
* Incident Type Init page
* #module incident-type-init
*/
define(function (require) {
var $ = require('jquery'),
jqueryplugin = require('jqueryplugin'),
timeentry = require('timeentry'),
bootstrap = require('bootstrap');
/**
* Jquery ready function
*/
$(function () {
$('.js-timeentry').timeEntry();
});
});
but when the application runs I got this error:
$.JQPlugin.createPlugin is not a function, it is like does not find the jquery.plugin.js
I checked the network tab in chrome and both files are loaded, jquery.plugin.js and jquery.timeentry.js
UPDATE: In our application, we are using Asp.net MasterPages, and there we are loading an old jquery version, 1.5.1, and I use that MasterPage in my page, but when I check the network tab in chrome, is loading the MasterPage scripts first,then all the requirejs stuff.
and the funniest part is that sometimes work, sometimes not.
Any clue?
The module jqueryplugin needs to have jQuery already loaded for it. It is not an AMD module because it does not call define. So you need an additional entry in shim for it:
jqueryplugin: ["jquery"]
The above is short for:
jqueryplugin: {
deps: ["jquery"]
}
I don't think your code is syntactically correct.
Try this:
1. Your script should refer to the require.config in data-main.
<script data-main="PATH_TO_CONFIG_FILE" src="../../scripts/require.js"></script>
2. Quotes are missing in paths of the config file. Instead it should be like this
require.config({
baseUrl: '../../scripts',
paths: {
"app": '../../app/utilization-management',
"appIncidentTracking": '../../app/incident-tracking',
"jquery": 'jquery-3.1.1.min',
"jqueryui": 'jquery-ui-1.12.1.min',
"jqueryplugin": '../../js/jquery.plugin.min',
"timeentry":'../../js/jquery.timeentry.min',
"handlebars": 'handlebars.amd.min',
"text": 'text',
"moment": 'moment.min',
"datatable": 'DataTables/jquery.dataTables.min',
"blockUI": 'jquery.blockUI.min',
"shared": '../../app/shared',
"bootstrap": 'bootstrap.min',
"bootstrap-datepicker": 'bootstrap-datepicker.min',
"bootstrap-multiselect": '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
"bootstrap-multiselect": {
deps: ["bootstrap"]
},
"timeentry": {
deps:["jquery", "jqueryplugin"],
exports:"timeentry"
}
}
});
3. Since your module has dependencies, list them like this:
define(["jqueryplugin","timeentry","bootstrap"],function(jqueryplugin,timeentry,bootstrap) {
$(function () {
$('.js-timeentry').timeentry();
});
});
I'm trying to implement requirejs in my django project using qcode-decoder as one of the libs (https://github.com/cirocosta/qcode-decoder/blob/master/src/qcode-decoder.js).
In html i'm doing this:
<script src="{{STATIC_URL}}js/libs/require.js"></script>
<script src="{{STATIC_URL}}js/pages/pay_iframe.js"></script>
And this is my pay_iframe.js:
requirejs.config({
baseUrl: '/static/js/pages',
paths: {
qcode_decoder: '../libs/qcode/qcode-decoder',
porthole: '../libs/porthole',
jquery: '../libs/jquery',
pay_iframe: 'pay_iframe',
},
shim: {
'qcode_decoder': {
exports: 'QCodeDecoder',
},
'pay_iframe': {
deps: ['jquery', 'qcode_decoder', 'porthole'],
},
}
});
require(['jquery', 'qcode_decoder', 'porthole'], function($, QCodeDecoder) {
console.log(QCodeDecoder);
var qr = new QCodeDecoder();
if (!(qr.isCanvasSupported() && qr.hasGetUserMedia())) {
...
}
...
});
Everything seems to load fine, in the right order but when I try to create QCodeDecoder object (which worked before implementing requirejs btw) i get the following error:
Uncaught TypeError: object is not a function
I guess it is because QCodeDecoder is an object (as printed by console.log):
Object {imagedata: null, width: 0, height: 0, qrCodeSymbol: null, debug: false…}
However this object does not contain functions used later (isCanvasSupported and hasGetUserMedia) so I cannot just do that:
var qr = QCodeDecoder;
It does not work either.
Maybe I should export (in shim config) something else?
Please help me out.
Changing require to define solves it.
Right now in my header I've got this code:
<script src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
require.config({
baseUrl: "/js/libs",
paths: {
jquery: "jquery/jquery-1.11.1.min",
jqueryUi: "jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
portal: "../dev/portal"
},
shim: {
"jqueryUi": {
export:"ui" ,
deps: ['jquery']
}
}
});
require( ["portal"], function(portal) {
portal.config={'var': 'value'};
portal.init();
}
);
</script>
I want to do it the right way using data-main attr:
<script data-main="/js/build/req-init" src="/js/libs/requirejs/requirejs.min.js"></script>
<script>
require( ["portal"], function(portal) {
portal.config={'var': 'value'};
portal.init();
}
);
</script>
and move all require.config to that file (/js/build/req-init.js).
Problem is that it searches potral.js file in root directory because data-main file isn't loaded yet and it doesn't know paths. How to delay execution of require(["portal"]) ?
I need to have portal.init() in HTML because of portal.config - variables will be defined with php.
I have apply a different pattern in our html5 application to move requireJS config to an external file.
directory structure
{webroot}/
html/
js/
apps/
conf.js
main.js
libs/
jquery-1.11.1.min.js
...
../js/app/conf.js
var require = {
baseUrl: "../js",
paths: {
app: "../js/app",
libs: "../js/libs",
jquery: "libs/jquery/jquery-1.11.1.min",
jqueryUi: "libs/jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
portal: "../dev/portal"
},
shim: {
"jqueryUi": {
export:"ui" ,
deps: ['jquery']
}
}
});
../js/app/main.js
require( ["portal"], function(portal) {
portal.config={'var': 'value'};
portal.init();
}
);
inside html
<scrip src="/js/app/conf.js"></script>
<script data-main="app/main" src="/js/libs/requirejs/requirejs.min.js"></script>
the trick is to use your config in a little different format and load it before your main script. This is the only way which is really reliable to load an "external" config in all cases:
config.js:
var require = {
baseUrl: "/js/libs",
paths: {
jquery: "jquery/jquery-1.11.1.min",
jqueryUi: "jquery-ui/mapa/js/jquery-ui-1.10.4.custom.min",
portal: "../dev/portal"
},
shim: {
"jqueryUi": {
export:"ui" ,
deps: ['jquery']
}
}
};
req-init.js
require( ["portal"], function(portal) {
portal.config={'var': 'value'};
portal.init();
});
html:
<script type="text/javascript" src="config.js"></script>
<script data-main="/js/build/req-init" src="/js/libs/requirejs/requirejs.min.js"></script>
http://requirejs.org/docs/api.html#config
for further optimizations (because I see you have a build folder) I would concatenate the config.js with the requirejs.min.js (config before require) to lose a request
This is what my config.js file looks like:
require.config({
baseUrl: '../',
paths: {
jQuery: 'js/jquery-1.10.2.min',
uiEffectsCore: 'js/jQueryUIEffectsCore',
//Handlebars: 'js/handlebars',
SyntaxHighlighter: 'js/syntaxhighlighter/scripts/shCore',
shXml: 'js/syntaxhighlighter/scripts/shBrushXml'
},
shim: {
jQuery: {
exports: 'jQuery'
},
uiEffectsCore: {
deps: ['jQuery']
},
shXml: {
deps: ['SyntaxHighlighter']
}
}
});
require(['js/main']);
Then my main.js looks like this:
define(function(require){
require('jQuery');
require('uiEffectsCore');
require('SyntaxHighlighter');
require('shXml');
});
I think the problem is that there is no define(...) wrapper around my shXml file... I am wondering if I can make this work without having to use that wrapper. Maybe an export shim would do it.
As it stands now, i get this error every time.
This question has also been asked here on github.
Check out this article, also from github. I tested this, and it works great, but you have to replace the first line of your brush.js files (inside syntaxhighlighter) with this line here:
SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);
I don't even know why that fixes the issue, but it does, and you can load your scripts like this:
define(function(require){
require('jQuery');
require('uiEffectsCore');
require('SyntaxHighlighter');
require('shXml');
require('shCss');
require('shJs');
require('Raphael');
And you need a shim in your config for dependencies:
paths: {
SyntaxHighlighter: 'js/syntaxhighlighter/scripts/shCore',
shXml: 'js/syntaxhighlighter/scripts/shBrushXml',
shCss: 'js/syntaxhighlighter/scripts/shBrushCss',
shJs: 'js/syntaxhighlighter/scripts/shBrushJScript'
},
shim: {
shXml: {
deps: ['SyntaxHighlighter']
},
shCss: {
deps: ['SyntaxHighlighter']
},
shJs: {
deps: ['SyntaxHighlighter']
}
}
I load require.js with jQuery included like this in my html:
<script data-main="requires" src="lib/require-jquery.js"></script>
The content of my requires.js:
require.config( {
paths: {
"jquery.mobile": "lib/jquery.mobile",
"jquery.mobile.router": "lib/jquery.mobile.router"
},
shim: {
"jquery.mobile" : {
"exports": "$.mobile"
},
"jquery.mobile.router": {
"deps": [ "jquery.mobile" ],
"exports": "$.mobile.Router"
}
}
} );
require(["jquery.mobile.router" ], function() {
require(["router"]);
} );
And in my router.js i create a new instance of the jquery mobile router plugin:
router = new $.mobile.Router(...);
Which gives me this error:
Uncaught TypeError: undefined is not a function
When I output $ and $.mobile, they are both defined, just $.mobile.Router is undefined.
What have I done wrong here?
My Problem was that I added jquery.mobile as a dependency for jquery.mobile.router, thus jQuery mobile will be loaded first, where as the documentation for the router states this:
The jQuery Mobile router javascript file must be loaded before jQuery Mobile.
This is how I changed my requires.js to fix the problem:
require.config( {
paths: {
"jquery.mobile": "lib/jquery.mobile",
"jquery.mobile.router": "lib/jquery.mobile.router"
},
shim: {
"router": {
"deps" : ["jquery.mobile"]
},
"jquery.mobile" : {
"deps" : [ "jquery.mobile.router"],
"exports": "$.mobile"
},
"jquery.mobile.router": {
"exports": "$.mobile.Router"
}
}
});
require(["router"]);
Now I just require my router.js and load jquery.mobile and jquery.mobile.router as dependencies. Load order now is this:
jquery.mobile.router
jquery.mobile
router
Try this in your router.js file:-
define(["jquery", "jquery.mobile.router"], function($) {
// your js code in router.js
} );
By specifying jquery in your define call and passing in $ as an argument, the jquery object $ and associated functions defined in jquery.mobile.router are now made available in the scope of your code (contained in the file router.js in its entirety).