RequireJS can not find a JavaScript module - javascript

I have an index.html file which specifies the location of a main.js to RequireJS. I have a pure client side site and I am trying to require other RequireJS modules from the server. The code worked last week, all of sudden I started getting this error without changing the code.
Here's the HTML code. In the tag, I am specifying the path to find the main.js to RequireJS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Doc View</title>
<link rel="stylesheet" href="assets/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/app.css" />
<script data-main="views/main.js" src="assets/lib/requirejs/require.js">
</script>
<base href="/viva_med_web_local_version/">
</head>
<body>
<div class="ng-cloak">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</body>
</html>
I have main.js in my views. My project structure look like this:
I have no idea why I am getting this error as the path to main.js is given in the index.html. I am getting this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:138 Uncaught Error: Script error for: main
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:163)
at HTMLScriptElement.onScriptError (require.js:1666)
Here's the main.js file:
requirejs.config({
waitSeconds: 1200,
paths: {
underscore: 'assets/lib/underscore/underscore',
angular: 'assets/lib/angular/angular',
'angular-cookies': 'assets/lib/angular-cookies/angular-cookies.min',
'amcharts': 'assets/lib/amcharts_3.21.2/amcharts/amcharts',
'amcharts-serial': 'assets/lib/amcharts_3.21.2/amcharts/serial',
'amcharts-angular': 'assets/lib/amcharts-angular/dist/amChartsDirective',
'angular-route': 'assets/lib/angular-route/angular-route',
'angular-ui-route': 'assets/lib/angular-ui-router/release/angular-ui-router',
'ui.bootstrap': 'assets/lib/angular-bootstrap/ui-bootstrap-tpls',
'bootstrap': 'assets/lib/bootstrap/dist/js/bootstrap.min',
'jquery': 'assets/lib/jquery/dist/jquery'
// more configuration
},
shim: {
underscore: {
exports: '_'
},
'angular': {
exports: 'angular'
},
'angular-ui-route': {
deps: ['angular']
},
'amcharts-serial': {
deps: ['amcharts']
},
'amcharts-angular': {
deps: ['angular', 'amcharts', 'amcharts-serial']
},
'ui.bootstrap': {
deps: ['angular']
},
'states': {
deps: ['angular'],
exports: 'states'
},
'angular-route': {
deps: ['angular']
},
'bootstrap': {
deps: ['jquery']
},
'angular-cookies': {
deps: ['angular']
}
},
priority: [
'angular'
],
dir: "."
});
requirejs(['angular',
'angular-cookies',
'app',
'underscore',
'js/routes',
'bootstrap',
'jquery',
'amcharts',
'amcharts-serial',
'amcharts-angular',
'ui.bootstrap'
], function (angular, app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['App']);
document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
});
});
Can someone help me? There is nothing wrong with main.js - My teammate has the same main.js and it is working for him. I tried copying his main.js, but it does not work either. I tried clearing the cache and also restarting WebStorm. It's still not working.

Related

Separate scripts with RequireJS

I recently worked on a web app, and i wanted to separate it into modules.
I searched and found out that RequireJs is the best for this. I read the doc, and some tutorials about it and came up with this
requirejs.config({
baseUrl: "js/lib",
shim: {
'jquery-1.12.1.min': ['jquery-1.12.1.min'],
'materialize.min': ['materialize.min'],
'knockout-3.4.0': ['knockout-3.4.0'],
'pouchdb-5.3.0.min': ['pouchdb-5.3.0.min']
},
waitSeconds: 0,
paths: {
'jquery-1.12.1.min': 'jquery-1.12.1.min',
'materialize.min': 'materialize.min',
'knockout-3.4.0': 'knockout-3.4.0',
'pouchdb-5.3.0.min': 'pouchdb-5.3.0.min',
}
});
require(["jquery-1.12.1.min", "knockout-3.4.0", "materialize.min", "pouchdb-5.3.0.min"], function($, ko) { //My main functions and other stuff ... }
My index has the following:
<script data-main="js/main" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/converter.js"></script>
But it seems that my Jquery, KO, materialize.css and pouchdb aren't loading as i see on my chrome dev tools in Network:
I also read about the shim config how to set up the dependences and i want them in that order. I don't really know what am i missing, any help would really be appreciated.
Folder structure is:
js:
lib:
->jquery-1.12.1.min.js
->knockout-3.4.0.js
->pouchdb-5.3.0.min.js
->materialize.min.js
->require.js
main.js
converter.js
Ok it seems require and materialze.css have a problem with hammer.js, what i recommend is you go and download Hammer.min.js and include it in your lib folder.
Then in your main.js add the following:
requirejs.config({
baseUrl: 'js/lib',
waitSeconds: 0,
paths: {
app: '../app',
jquery: 'jquery-1.12.1.min',
materialize: 'materialize.min',
knockout: 'knockout-3.4.0',
pouchdb: 'pouchdb-5.3.0.min',
hammer: 'hammer.min'
},
shim: {
hammer: {
deps: ['jquery']
},
pouchdb: {
deps: ['jquery']
},
knockout: {
deps: ['jquery'],
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer'],
},
jquery: {
exports: '$'
}
}
});
You include you hammer and also the dependency for jquery on it. And i see that you didn't put the PouchDb object in the function:
define(["jquery", "knockout", "pouchdb", "materialize" ], function($, ko, PouchDB) {...
Hope this helps
Using path, requirejs replace module id prefixes (name in config) with the corresponding value.
Using shim you can export a global variable and configure the dependencies ( materialize depends jquery so you have to import jQuery before importing materialize.js )
requirejs.config({
baseUrl: "js/lib",
waitSeconds: 0,
paths: {
'jquery': 'jquery-1.12.1.min',
'materialize': 'materialize.min',
'knockout': 'knockout-3.4.0',
'pouchdb': 'pouchdb-5.3.0.min',
'hammer': 'hammer.min',
},
shim: {
pouchdb: {
deps: ['jquery']
},
knockout: {
exports: 'ko'
},
materialize: {
deps: ['jquery', 'hammer']
},
jquery: {
exports: '$'
}
}
});
require(["jquery", "knockout", "materialize", "pouchdb"], function ($, ko) {
console.log($);
console.log(ko);
});

Moving require config to external file

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

Module 'angular' is not available

I have a demo site running on EC2 and I pushed a version of the AngularJS app and now everything seems broken. I'm using AngularJS 1.2 and RequireJS 2.1. I have a modules/main_prod.js file. It looks like this:
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../js3p/jquery',
'jquery-ui': '../js3p/jquery-ui',
'jquery.ui.widget': '../js3p/jquery.ui.widget',
'bootstrap': '../js3p/bootstrap',
'angular': '../js3p/angular',
'angular-sanitize': '../js3p/angular-sanitize',
'ngUi': '../js3p/angular-ui',
'ui.bootstrap': '../js3p/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../js3p/calendar',
'angular-ui-router': '../js3p/angular-ui-router',
'uikeypress': '../js3p/keypress',
'dtPicker': '../js3p/bootstrap-datetimepicker.min',
'fileUpload': '../js3p/jquery.fileupload',
'fullcalendar': '../js3p/fullcalendar',
'iframeTransport': '../js3p/jquery.iframe-transport',
'lodash': '../js3p/lodash',
'moment': '../js3p/moment',
'restangular': '../js3p/restangular',
'typeahead': '../js3p/typeahead'
},
shim: {
'jquery': { deps: [] },
'jquery-ui': { deps: ['jquery'] },
'jquery.ui.widget': { deps: ['jquery'] },
'bootstrap': { deps: ['jquery'] },
'angular': { deps: ['jquery'], exports: 'angular' },
'angular-sanitize': { deps: ['angular'] },
'ngUi': { deps: ['angular'] },
'ui.bootstrap': { deps: ['angular', 'ngUi'] },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'] },
'angular-ui-router': { deps: ['angular', 'ngUi'] },
'uikeypress': { deps: ['angular', 'ngUi'] },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'] },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'] },
'fullcalendar': { deps: ['jquery', 'jquery-ui'] },
'iframeTransport': { deps: ['jquery', 'jquery-ui'] },
'lodash': { deps: [] },
'moment': { deps: ['jquery'] },
'restangular': { deps: ['angular', 'lodash'] },
'typeahead': {deps: ['jquery', 'bootstrap'] }
},
priority: ['angular']
});
require(['angular',
'angular-ui-router'],
function (angular, routes) {
require(['angular', 'app'], function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I load the page, I see all of these libraries loading. I even see the page load and it looks like half of Angular is working (I see directives filled in and whatnot). Anything subject to a ng-show attribute doesn't seem to work (shown when should be hidden), but my redirect that is within AngularJS does work. Every page load puts this in the console:
Error: [$injector:modulerr] Failed to instantiate module angular due to:
[$injector:nomod] Module 'angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
...
Let me know if more code is needed, I'm happy to provide. I'm at a total loss here.
So I came to find the problem. I'm working from the ngStart seed project and when it does a build for deployment it changes the top of the index.html file:
<!doctype html>
<!--(if target build)>
<html ng-app="angular" manifest="project.manifest">
<!(endif)-->
<!--(if target local)> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!(endif)-->
<head>
This ng-app="angular" is the actual cause of the error message. I removed it and things are behaving as expected.
You can't use angular and requirejs in this way. You need to use Angular ADM
https://github.com/marcoslin/angularAMD
http://www.startersquad.com/blog/angularjs-requirejs/

requireJS worked for one plug-in, but not another

I previously asked this question, and got one plug-in to work. Now, I'm trying to get another plug-in to work using the solution for the first plug-in, but that solution isn't working.
I'm trying to get this plug-in to work, but the chrome console spits out this error:
Uncaught ReferenceError: jQuery is not defined :3000/js/libs/textarea_auto_expand.js:41
My code is this:
require.config({
paths: {
jquery: '/js/libs/jquery/jquery-2.0.3',
underscore: '/js/libs/underscore/underscore-min',
backbone: '/js/libs/backbone/backbone-min',
//text: '/js/libs/text'
templates: '../templates'
,sockets: '/socket.io/socket.io'
,rangyInputs: '/js/libs/rangyinputs-jquery-1.1.2'
, textareaAutoExpand: 'js/libs/textarea_auto_expand'
},
shim: {
'Backbone': ['Underscore', 'jQuery'],
'sockets': {exports: 'io'},
'rangyinputs-jquery': {deps: ['jquery'], exports: '$'},
'textarea_auto_expand': {deps: ['jquery'], exports: '$'}
}
});
require(['jquery', 'router', 'libs/a_myLib/keydownHandler', 'libs/textarea_auto_expand' ],
function($, router, keydownHandler, ta_ae){
$("body").on("keydown", "textarea", keydownHandler);
router.initialize();
$("textarea").textareaAutoExpand();
})
The problem is that, you used path name jquery, but specified jQuery in you Backbones deps:
'Backbone': ['Underscore', 'jQuery'],
Again, here is working example of main.js
index.html
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
main.js
require.config({
paths : {
jquery : 'jquery-2.0.3',
'rangyinputs-jquery' : 'rangyinputs-jquery-1.1.2',
textareaAutoExpand: 'js/libs/textarea_auto_expand'
},
shim : {
'rangyinputs-jquery' : {deps : ['jquery'], exports : '$'},
'textarea_auto_expand': {deps: ['jquery'], exports: '$'}
}
});
require(['jquery', 'rangyinputs-jquery', 'textarea_auto_expand'], function($) {
console.log('Type of $.fn.textareaAutoExpand ' + typeof $.fn.textareaAutoExpand );
var t = $('<textarea/>').textareaAutoExpand();
$('body').append(t);
});

Require.js -- how to load relative to a module directory

My structure looks like so:
index.html
main.js #holds the configs.path and configs.shim
libs
jquery.js
require.js
backbone.js
underscore.js
modules
app
main.js #want to load in ./views/app.js here
views
app.js
so in /modules/app/main.js, I want to load in the /modules/app/views/app.js but having problem
Here is /modules/app/main.js
define(['views/app'],function(App){
console.log('app main')
//var app = new App();
})
The console error message I get is Get failed with path GitProjects/GameApp/views/app.js
How do I get it to load relatively inside modules?
here is ./main.js the file that holds the configs
require.config({
paths: {
jquery: './libs/jquery-2.0.3',
underscore: './libs/underscore',
backbone: './libs/backbone'
},
shim: {
"underscore": {
exports: '_'
},
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
and here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stop Game App</title>
<script src="./libs/require.js" data-main='./main'></script>
</head>
<body>
<div id="app"></div>
<script>
require(['./modules/app/main'],function(){
console.log('main')
})
</script>
</body>
</html>
You just need to set the path to "./" and be relative. That's all there is to it.

Categories