I'm trying to build client project using requireJs.
But when I published it on the nginx server, an error occurred.
This is my project directory structure
when it ran here, the browser threw a js error.
require(['config/require.conf'], function(){
'use strict';
require(['src/common/js/pageloader'], function(pageloader){
pageloader();
})
})
js error:
GET http://localhost:8011/src/homepage/config/require.conf.js require.js:1961
It seems like the error occurred because I use the relative path (lack of '/').
However, I add the slash as prefix of directory('/config/require.conf').
As a result, when the browser ran here, requirejs didn't add the suffix ".js" for the js file(config/require.conf.js).
Another error occurred~
GET http://localhost:8011/config/require.conf 404 (Not Found)
What should I do for the error? Thanks.
You can pass two things in the dependency list of a require call:
A module name. This is the default. When you pass a module name, RequireJS will convert the name to a path using baseUrl, paths, map, etc. from your RequireJS configuration.
A path. RequireJS considers that you are passing a path if the dependency: a) begins with '/', (which is your case), b) contains an HTML query (e.g. 'foo?bar=1'), c) ends with the .js extension, d) specifies a protocol (e.g. https://).
In this case, RequireJS uses the path as-is, without using its configuration to transform it, and it does not automatically add a .js extension to it.
Your usage is the 2nd case so you have to add .js to your path so that RequireJS can find your file:
require(['/config/require.conf.js'], function() {
Related
I have an error when I load datatables js.
Load timeout for modules: datatables
It is possible I have some wrong configuration (path).
How can I check where requirejs expects file ? Can I get path from module in requirejs ?
I don't see any fail load file in Chrome console.
"datatables": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
"datatables.net": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
If you put two different module names pointing to the same file path in your paths configuration, then that's not going to work: RequireJS will error out.
If you want two module names to resolve to the same file, what you should do is use map to perform the mapping and leave only one module in paths, like:
paths: {
"datatables.net": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
},
map: {
"*": {
datatables: "datatables.net",
},
}
The map setting makes it so that when any module ("*") makes a request for the module named datatables it receives the module named datatables.net instead.
I use require.js to load files at runtime like following
This is working as expected when I run the file in the right context(I mean when the call is coming from the right path.)
module1.js
define(["otherModule"], function(otherModule) {
working!!!
....
Now I want to create some unit test to this file (module1) from
other context (from folder of tests which is found in diffrent location in the project) and I get error
require.js:145 Uncaught Error: Script error for: otherModule
Since it tries to run the get on this path during the Unit Test
which is located in diffrent project structure ...
https://app/path1/path2/path3/otherModule.js
And in runtime which works (from different context) it find it in the path
https://app/path1/path2/path3/path4/path5/otherModule.js
There is additional path4 & path5 in the request that works,
How should I solve it to work on both cases (UT/Runtime) ?
http://requirejs.org
I think you should be able to get it working by applying a RequireJS configuration file, so that the module name is abstracted from its path:
E.g. in the test context, call something like this as initialization step:
require.config({
baseUrl: "/path1/path2/path3"
});
Alternatively, you can also remap single modules like so (this can also be used to inject a different implementation of a specific module for testing etc.):
require.config({
paths: {
"otherModule": "/path1/path2/path3/otherModule"
}
});
See here: http://requirejs.org/docs/api.html#config
I'm trying to use tracking-js library in my project I'm using react but I dont know if I'm doing anything wrong but keep showing that the module is not found, I already check my package.json and the module install. So this is how I require the module:
const tracking = require("tracking");
what am I doing wrong?
For node, including node-based build tools, first make sure that the module is present. Keep in mind that require does not care about the package.json of your app, only about the module files being present.
Check if node_modules/tracking is present.
Make sure the "main" JS file can be found. If there's a node_modules/tracking/package.json file, see if it has a main property and if the file it references exists. If there is no main property, make sure there's an index.js in the root of the module directory.
If all this is fine and you're getting the module not found error at runtime in client-side JavaScript, then your bundling config may be incorrect, and your webpack/browserify/whatever config will have to be scrutinized for bugs.
I forked Brackets, because I'm planning to make a code editor fully integrated if Steam. To do so, using Javascript, I add a git submodule on the thirdparty folder to use the greenworks repo (a solution to make Steamworks work with Javascript). I loaded this module on brackets.js, like so:
// Load greenworks module
var greenworks = require("thirdparty/greenworks/greenworks");
But when I call it, either on my extension, or even on console, it says:
[Extension] failed to load C:/Program Files (x86)/Brackets/dev/src/extensions/dev/greenworks - Error: Module name "/thirdparty/greenworks/greenworks" has not been loaded yet for context: _
or
Error: Module name "/thirdparty/greenworks/greenworks" has not been loaded yet for context: _
Besides brackets.js, where else should I call greenworks module before I use it (on a extension, or on the console for testing purposes)?
So, I have an app that is using requireJS. Quite happily. For the most part.
This app makes use of Socket.IO. Socket.IO is being provided by nodejs, and does not run on the same port as the main webserver.
To deal with this, in our main js file, we do something like this:
var hostname = window.location.hostname;
var socketIoPath = "http://" + hostname + ":3000/socket.io/socket.io";
requirejs.config({
baseUrl: "/",
paths: {
app : "scripts/appapp",
"socket.io" : socketIoPath
}
});
More complicated than this, but you get the gist.
Now, in interactive mode, this works swimingly.
The ugliness starts when we try to use r.js to compile this (technically we're using grunt to run r.js, but that's besides the point).
In the config for r.js, we set an empty path for socket.io (to avoid it failing to pull in), and we set our main file as the mainConfigFile.
The compiler yells about this, saying:
Running "requirejs:dist" (requirejs) task
>> Error: Error: The config in mainConfigFile /…/client.js cannot be used because it cannot be evaluated correctly while running in the optimizer. Try only using a config that is also valid JSON, or do not use mainConfigFile and instead copy the config values needed into a build file or command line arguments given to the optimizer.
>> at Function.build.createConfig (/…/r.js:23636:23)
Now, near as I can figure, this is due to the fact that I'm using a variable to set the path for "socket.io". If i take this out, require runs great, but i can't run the raw from a server. If I leave it is, my debug server is happy, but the build breaks.
Is there a way that I can lazily assign the path of "socket.io" at runtime so that it doesn't have to go into the requirejs.config() methos at that point?
Edit: Did some extensive research on this. Here are the results.
Loading from CDN with RequireJS is possible with a build. However, if you're using the smaller Almond loader, it's not possible.
This leaves you with two options:
Use almond along with a local copy of the file in your build.
Use the full require.js loader and try to use a CDN.
Use a <script> tag just for that resource.
I say try for #2 because there are some caveats. You'll need to include require.js in your HTML with the data-main attribute for your built file. But if you do this, require and define will be global functions, allowing users to require any of your internal modules and mess around with them. If you're okay with this, you'll need to follow the "empty: scheme" in your build config (but not in your main config).
But the fact remains that you now have another HTTP request. If you only want one built file, which includes the require.js loader, you'll need to optimize for only one file.
Now, if you want to avoid users being able to require your modules, you'll have to do something like wrap:true in your build. But as far as I can tell, once your module comes down from CDN, if it's AMD, it's going to look for a global define function to register itself with, and that won't exist because it's now wrapped in a closure.
The lesson I took away from all this: inline your resources to your build. It makes sense. You reduce HTTP requests, minify it all and get gzip compression. You don't expose your modules to the world and everything is a lot simpler. If you cache your resources properly you won't even need to worry about it.
But since new versions of socket.io don't like AMD, here's how I did it. Make sure to include the socket.io <script> tag before requirejs. Then create a requirejs module named socket.io with the following contents:
define([], function () {
var io = window.io;
window.io = null;
return io;
});
Set the path like so: 'socket.io': 'core/socket.io' or wherever you want.
And require it as normal! The build works fine this way.
Original answer
Is it possible that you could make use of the path config fallbacks specified in the RequireJS API? Maybe you could save the file locally as a fallback so your build will work.
The socket.io GitHub repository specifies that you can serve the client with the files in the socket.io-client package's dist/ directory.