When Loading html file with require.js error with extension - javascript

I have file
reg.html
<label>Name:</label>
in require.config :
requirejs.config({
paths: {
reg:"/templates/reg.html"
}
})
When i try load template :
define('ng_start',["angular","jquery","reg"],function(An,$,template){
....
})
GET /templates/registry.html.js?bust=1417489939824228.12310815788805
require.js:166 Uncaught Error: Script error for: registry
http://requirejs.org/docs/errors.html#scripterror
How deleted js extension from registry.html.js ?

You need to state that your "reg" module is to be loaded as text and not as a JavaScript module. See the following for details:
https://github.com/requirejs/text
Your specific code should read:
define('ng_start',["angular","jquery","text!reg"],function(An,$,template){
....
})
note: the addition of text! in the module definition requirements for reg.

Related

requireJS, origin of the define statement

I'm working on a large project that uses Requirejs for dependency management, specifically the convention is for every file to have this pattern:
define(['dependency1', 'dependency2'], function (dependency1, dependency2) {
... some code ...
});
now I'm investigating a failure where some file is trying to require a dependency that no longer exists.
I'm getting this error from RequireJS:
GET https://some-location/some-file.js net::ERR_ABORTED
Uncaught Error: Script error for: some-file
http://requirejs.org/docs/errors.html#scripterror
at C (require.min.js:8)
at HTMLScriptElement.onScriptError (require.min.js:29)
at HTMLScriptElement.nrWrapper (...)
How can I know which file contains the faulty dependency?
Simply searching the project files is not good enough since it is a large project that spans across multiple code bases.
Is there a way to make RequireJS tell me who asked for it?
What version of requirejs are you using? I'm using 2.3.2 and the error output provide more info, take a look:
GET http://localhost:9090/requirejs/js/dependency1.js net::ERR_ABORTED
require.js:168 Uncaught Error: Script error for "home/dependency1",needed by: home/somefile
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1735)
Please, note that the part that says needed by: home/somefile is telling us the file that is requiring the failed dependency. This is the small local test I did.
requirejs config
require.config(
{
paths: {
'home': './js'
},
callback: function() {
require(['home/somefile'], function(a) {
console.log(a);
});
}
}
);
./js/somefile.js
define(['home/dependency1'], function (dependency1) {
console.log(dependency1);
});
So, after getting the error Uncaught Error: Script error for "home/dependency1",needed by: home/somefile, we can say that the file requiring the failed dependency is PATH_TO_OUR_PROJECT/js/somefile.js. Remember that we need to pay attention to our paths in the require config.
You can play and test the Global requirejs.onError function but it won't give you more info than the regular requirejs output.
More info in Handling Errors from docs.
Hope it helps.
Following Castro Roy's answer i made a test to verify this is indeed issue of requireJS version.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Require Test</title>
<script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body></body>
</html>
main.js
requirejs(['someFile'], function(someFile) {
console.log('main executing')
});
someFile.js
define(['someDependency'], function (someDependency) {
console.log('someFile executing')
});
and someDependency.js obviously missing.
Results:
using requireJs 2.1.20 (used in my project)
GET http://localhost:63342/playground-simple/someDependency.js net::ERR_ABORTED
Uncaught Error: Script error for: someDependency
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.min.js:1)
at HTMLScriptElement.onScriptError (require.min.js:1)
Then again using requireJs 2.3.2
GET http://localhost:63342/playground-simple/someDependency.js net::ERR_ABORTED
Uncaught Error: Script error for "someDependency", needed by: someFile
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1735)
So clearly Yes.
This is an issue of version and not some unique behavior of my project and this information is given in the error message for later versions of require.
sadly i was not able to find any documentation for this change

Require.js: Load dependency found outside of baseUrl

I have a require.config.js file that looks like this:
require.config({
baseUrl: '/some/path',
paths: {
module1: '../../path/to/my/module'
}
});
Why does the following work:
define(function(require) {
const module1 = require('module1');
});
But this doesn't?
require(['module1'], ...);
When I run the above, it tries to load the dependency from the baseUrl and errors out:
require.js:168 Uncaught Error: Script error for "module1"
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1735)
Not even sure if this is the right question to ask. Any help is appreciated
Give your require.config I believe you would need this
require(['module1/module1'], ...);
So basically you need to include the defined path to the required file.

requirejs ignore my requirejs.config

here is my files struct:
ex/js/prpr.js
ex/test-requirejs.html
test-requirejs.html
<script>
requirejs.config({baseUrl: "js"})
require(["prpr.js"], function () {
var uri = new Uri("http://baidu.com")
})
</script>
when i google-chrome /home/roroco/Dropbox/jss/ro-js/ex/test-requirejs.html I get error
file:///home/roroco/Dropbox/jss/ro-js/ex/prpr.js Failed to load resource: net::ERR_FILE_NOT_FOUND
Uncaught Error: Script error for "prpr.js"
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1735)
my requirejs version is 2.3.2
how to make requirejs.config work?
update
even I use
require.js
requirejs.config({baseUrl: "js/"})
require(["prpr.js"])
and tag:
<script src="./require.js" data-main="./main.js"/>
I get same error
However I don't know your file structure But from your question I am assuming that it is like this
Project Folder
test-requirejs.html
main.js
require.js
js
prpr.js
If this is your folder structure
then in test-requirejs.html, script tag should be
<script data-main="main" src="require.js"></script>
Your main.js
require.config({
"baseUrl": "js"
})
require(["prpr"],function(){
});
I have tested this by my own and its working

ConverseJs gave error in angular js Route "Error: See almond README: incorrect module build, no module name define"

I am trying to use ConverseJS with angular js. I am facing problem in routing when page route to next page then I found this error
Error: See almond README: incorrect module build, no module name
define
I am doing:-
<script type="text/javascript" src="js/converse.min.js"></script>
require(['converse'], function (converse){
converse.initialize({
allow_chat_pending_contacts:true,
allow_contact_requests:true,
allow_dragresize:false,
allow_muc:false,
allow_otr: false,
allow_registration:false,
auto_list_rooms: false,
auto_subscribe: true,
auto_join_on_invite:true,
bosh_service_url: 'http://45.55.177.22:5280/http-bind/', // Please use this connection manager only for testing purposes
debug: false ,
auto_login:true,
jid:'jid',
password:'123',
hide_muc_server: true,
message_archiving: 'always',
i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported
prebind: false,
show_controlbox_by_default: false,
xhr_user_search: false,
image_upload_url: '/chat/image.php'
});
});
I am used this code in my index page and I found this error
Error: See almond README: incorrect module build, no module name
define
I am also used ng-view In page with help I route the page on index page. when I copied this code and place in other page which is loading by routing then its working fine on First time page load.
After page fully load and I am click to other page link then I found same error in routing.
Error: See almond README: incorrect module build, no module name
So please help me.
define

Using the requirejs shimConfig to load jQuery plugin

This code uses the requirejs.shimConfig to load the jQuery.mCustomScrollbar plugin:
requirejs.config({
baseUrl:'scripts',
paths:{
async:'lib/plugins/async',
domReady:'lib/plugins/domReady',
jquery:"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min",
"jquery.mCustomScrollbar":"lib/plugins/jquery.mCustomScrollbar.concat.min"
},
shim:{
"jquery.mCustomScrollbar":{
deps:['jquery'],
exports:'jQuery.fn.mCustomScrollbar'
}
}
});
However the Chrome console shows that requirejs tries to load the file from the baseUrl:
GET http://localhost:8180/GoogleMapErpProject/scripts/jQuery.mCustomScrollbar.js 404 (Not Found) require.js:34
Uncaught Error: Script error for: jQuery.mCustomScrollbar
http://requirejs.org/docs/errors.html#scripterror
EDIT:
I have found an unsatisfactory solution to the issue:
requirejs.config({
baseUrl:'scripts',
paths:{
async:'lib/plugins/async',
domReady:'lib/plugins/domReady',
jquery:"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min",
plugins:"lib/plugins"
},
shim:{
"jquery":{
exports:"jQuery"
},
"plugins/jquery.mCustomScrollbar.concat.min":{
deps:['jquery'],
exports:'jQuery.fn.mCustomScrollbar'
}
}
});
Why would it not work when I specified a path in the paths and used that path in the shimConfig?
from require.js documentation,
baseUrl: the root path to use for all module lookups. So in the above
example, "my/module"'s script tag will have a
src="/another/path/my/module.js". baseUrl is not used when loading
plain .js files (indicated by a dependency string starting with a
slash, has a protocol, or ends in .js), those strings are used as-is,
so a.js and b.js will be loaded from the same directory as the HTML
page that contains the above snippet.
Hence paths should/can be like this:
paths:{
async:'lib/plugins/async',
domReady:'lib/plugins/domReady',
jquery:"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min",
"jquery.mCustomScrollbar":"/lib/plugins/jquery.mCustomScrollbar.concat.min"
},
or
paths:{
...
"jquery.mCustomScrollbar":"./lib/plugins/jquery.mCustomScrollbar.concat.min"
},
or
paths:{
...
"jquery.mCustomScrollbar":"lib/plugins/jquery.mCustomScrollbar.concat.min.js"
},
if you dont want it to get loaded from baseUrl.

Categories

Resources