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.
Related
I'm making a Chrome extension and therefore trying to use require.js, but unsuccessful to "require" the first file to be load.
What i am doing wrong?
Project details
Error:
Project structure:
app.js:
var jq = $.noConflict(true);
function docReady() {
requirejs.config({
baseUrl: 'app',
paths: {
}
});
require(['core'], function(core) {
core.log();
});
}
jq(document).ready(docReady);
core.js:
define(function () {
var methods = {};
methods.log = function() {
console.log('testing...');
}
return methods;
});
Yes, i do load require.js in content_scripts inside the manifest.json, before loading app.js
I'm trying to do something simple as displaying a console.log from my second file, but after so many tries idk what to do.
May someone help me?
Your manifest needs to loading the core.js before or after the content load event
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
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
I've been researching this question a lot. I know a common issue is caused with asynchronous loading before require has been defined. I dont think that's the issue that I'm experiencing. I'm declaring baseURL and paths in a config file, but I always get an error that the scripts can't be found because it seems to ignore my paths and just look from the baseURL.
This is my folder structure
index.html
js/
app/
jsonLoader.js
notionalAddGraph.js
lib/
config.js
require.js
There's nothing in lib, but I'm mimicking the structure of a project that I'm working on. Here is the html for the page.
HTML:
<html>
<head>
<title>Blah Blah Blah</title>
<script data-main="js/config.js" src="js/require.js"></script>
<script id="graphData" type="application/json">
{
"json": "Is better than",
"global": "but it requires a change to the authoring",
"environment": "also, because of the JSON.parse",
"required": "it is probably slower too"
}
</script>
</head>
Here is the code for config.js
config.js:
require({
baseUrl: 'js/lib',
paths: {
app: '../app'
},
urlArgs: 'bust=' + (new Date()).getTime()
});
require(['app/jsonLoader','app/notionalAddGraph'],
function(require) {
'use strict';
});
and here is the code for jsonLoader.js
jsonLoader.js:
define(function() {
var jsonString = document.getElementById('graphData').textContent;
return JSON.parse(jsonString);
})
annnd here is the code for notionalAddGraph.js
notionalAddGraph.js:
define([
'jsonLoader'
], function(json) {
console.log(json.required);
});
so every time that I try this, require tries to load js/lib/jsonloader.js and fails because it should be looking under app, not lib. Oddly enough, if I intentionally specify the incorrect path when I define app, requireJS will at least look for jsonLoader where I told it to. Obviously though, its not there, because I specified the wrong path. When I specify the correct path, it doesn't work and tries to load from baseURL. I've tried changing everything I can imagine for config.js, but nothing seems to work. I've copied the format directly from requireJS API, but still nothing. Does anyone have an idea as to what I might be doing wrong?
In notionalAddGraph.js you have define with 'jsonLoader' so its looking in the correct path as expected, add ../ to your define and should work correctly
Here's what i'd try
First, call the scripts using an absolute path (you can rollback this change later, but it's just to be on the safe side)
<script data-main="/js/config.js" src="/js/require.js"></script>
Second, declare the config parameters using requirejs.config. I guess that the way you're doing now they are just variables.
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
},
urlArgs: 'bust=' + (new Date()).getTime()
});
Third, the return of the jsonLoader isn't the require object, but the object that comes from parsing the jsonString. The way you're doing now is replacing the require object.
require(['app/jsonLoader','app/notionalAddGraph'], function(jsonObject) {
'use strict';
console.log('require is still', require, 'and jsonobject is ',jsonObject);
});
Here is my main.js
requirejs.config({
baseUrl: '/js',
paths: {
jquery: 'jquery',
ckeditor: 'ckeditor/ckeditor',
juiAutocomplete: 'jquery-ui-1.10.4.custom',
tags: 'bootstrap-tokenfield',
createPost: 'createPost',
domReady: 'domReady',
test: 'dropUpload'
},
shim: {
createPost: {
deps: ['domReady!']
}
},
deps: ['require'],
callback: function(require) {
'use strice';
var moduleName = location.pathname.replace(/\//g, '-').replace(/^-/, '');
console.log('moduleName is: ' + moduleName);
console.log('yes is: ' + require.config);
}
});
In the callback, I'd like to access the paths which is defined in the requirejs.config() above. If it is possible, how to do it?
My purpose is to see if a module path is defined(exists). If so, then load the module script. If not checked, then a loading error will generate in the console.
Here are the available methods in requirejs by this console command. I can't find a way to access the paths I defined in requirejs.config(). Is this the right direction?
for (var i in requirejs) {console.log(i);}
config
nextTick
version
jsExtRegExp
isBrowser
s
toUrl
undef
defined
specified
onError
createNode
load
exec
undef
There is no public API to get the whole RequireJS configuration from inside a module. You can have a config section in your configuration, which modules may access.
However, the problem you describe trying to solve does not require you to read the configuration. Calling require the normal way will load the module. If the module can't be loaded, it will generate an error on the console. Presumably you also want your code to know whether the loading was successful or not. You can do it with an errback:
require(['foo'], function (foo) {
// Whatever you'd like to do with foo on success.
}, function (err) {
// Whatever you'd like to do on error.
});
If for some reason you must read the config directly then it is located at requirejs.s.contexts.<context name>.config where <context name> is the name of the RequireJS context. The default context is named _ so the configuration for it would be requirejs.s.contexts._.config. However, this is not part of the public API and can change at any time.