I installed three.js with bower install threejs.
Then after this I wish to have three.js in my page, so my app.js file starts with:
define(["jquery", "three"], function() {
"use strict";
However when my page loads the Chrome console shows:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/scripts/three.js
Uncaught Error: Script error
Well, shouldn't it be looking in components like it does for jQuery?
Basically how can I get started with yeoman and installing three.js?
Solution is as follows.
The app.js file needs to refer to "three" as above and this refers to the file main.js which has the following.
require.config({
paths: {
jquery: '../components/jquery/jquery',
three: '../components/threejs/build/three'
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: 'jquery'
}
}
});
The key here is the three which points where threejs three.js file is located.
Related
I have configured paths for handlebars and underscore in Requirejs config like so:
require.config({
baseUrl: '/js/',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
}
This is how I initialize requirejs:
<script type="text/javascript" data-main="/js/main" src="/js/libs/require/require.js"></script>
When i refresh the page multiple times, I get an error message saying:
Uncaught Error: Script error for "handlebars".
Digging a little deeper, I could see in the network tab of Chrome Dev tools that it's basically a 404 not found for the modules:
404 Not Found - http://localhost:8888/js/underscore.js
The above path is not the one configured in require.config.
I'm not able to exactly pinpoint the issue as this occurs only intermittently.
Any help is much appreciated.
Thank you.
Backbone.js needs underscore.js so if you refresh the page multiple times the libraries may not be loaded with the correct order
Please try shim configuration as below;
require.config({
baseUrl:'js',
paths: {
/* Core Libraries */
underscore : 'libs/underscore/underscore-min',
backbone : 'libs/backbone/backbone-min',
handlebars: 'libs/handlebars/handlebars.min'
},
shim:{
'backbone': {
deps: ['underscore']
}
}
}
Have require js working fine without the bundles. But whenever i use a bundle, i get timeouts for the modules i am trying to import.
Here is how i build the bundles with the asp.net mvc bundler/minifier
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/jquery-{version}.js",
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
bundles.EnableOptimizations = true;
Heres is the require js config in the cshtml file:
<script>
require.config({
baseUrl: "/scripts",
paths: {
jquery: "jquery-1.11.2"
},
waitSeconds: 20,
shim: {
bootstrap: {
deps: ['jquery']
}
},
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'jquery',
'bootstrap',
'moment'
]
}
});
require(["app/main/test"]);
</script>
And the js for the page (app/main/test):
require(['jquery', 'moment'], function ($, moment) {
console.log(moment().format());
});
Jquery, bootstrap and moment libraries are in the test bundle i have created, but i get load timeouts loading the page for moment.
Here's the chrome inspector error:
Any ideas?
thanks in advance.
This is happening because you are not requiring your bundle at all. Your require call has only jquery and moment. You have provided jquery file path, so requirejs uses that path to download and provide jquery module. But since there is no path definition for moment, it is only part of the bundle that you have created. So requirejs tries downloading moment by its module name as path and thus throws an error.
A simple fix for this is to require bundle itself.
require(['#Scripts.Url("~/bundles/test").ToString()'], function(bundle){
//At this point jquery, moment and bootstrap will be loaded.
});
You can choose to use jQuery, moment from global namespace in above example directly or you can try requiring them seperately in below example. I am not sure, but you may get into error with below example because of cyclic dependency.
require(['#Scripts.Url("~/bundles/test").ToString()', 'jquery', 'moment'], function(bundle, $, moment){
//At this point jquery, moment and bootstrap will be loaded.
});
Just remove 'jquery' from your bundles
bundles.Add(new ScriptBundle("~/bundles/test").Include(
"~/scripts/bootstrap.js",
"~/scripts/moment.js"));
...
bundles: {
'#Scripts.Url("~/bundles/test").ToString()': [
'bootstrap',
'moment'
]
}
...
You already have it specified in the paths
paths: {
jquery: "jquery-1.11.2"
},
It seems require.js maps the modules to bundles so that once a module that is part of a bundle is loaded, that bundle is not loaded again.
My angularjs project works fine with requirejs.
I want to use the nggrid tables but somewhere the bootstrapping is not happening correctly and i am getting the "ReferenceError: jQuery is not defined" in ng-grid.debug
Here is my configuration:
app.js : Adding ngGrid module as the dependent module
angular.module('MyApp', ['controllers', 'services',
'filters', 'directives', 'ngGrid']);
main.app: i already see Jquery being a dependency which should have been loaded loaded
require.config({
paths: {
jquery: 'vendor/jquery',
angular: 'vendor/angular.min',
domReady: 'vendor/domReady'
},
shim: {
angular: {
deps: [ 'jquery'],
exports: 'angular'
}
}
});
require([
'angular',
'app',
'domReady'
'vendor/ng-grid.debug'
In my experience, every time this error is thrown is because of the order you import the libraries. When I got this error, I had imported the ng-grid library with the other angular libraries, which was before jquery. Make sure it comes after both.
Not only does the order of the libraries matter also if you are using Visual studio MVC & web API the
#Scripts.Render("~/bundles/jquery") does not import the JQuery library immediately
Solution
Use the script tag and this will work out just fine
Example:
Mine scripts in my layout:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"> </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="~/Scripts/ng-grid.js" type="text/javascript"></script>
I'm having problems using canJS together with stealjs, i've cloned the repo of javascriptmvc (3.3 use canJS). Now i've this folder structure
/js
/can
/documentjs
/funcunit
/plugins
.
.
.
In another part of my application i've a "standalone module" e.g layout (generated using the scaffolding tool).
I load this module using "js/steal/steal.js?path/to/module/layout" inside my page and it works. If I stole some jquery plugins (e.g. located in the main js folder) inside my layout.js like so:
steal('plugins/jqueryplugin.js', 'plugins/jqueryplugin.css', function() {
// my code here
});
it still work, but when i try to add in the list of "dependecies" some component from "canJS" (even fixture.js generated with the tool...because it stoles can.fixture) it just stops to work and breaks everything. I've also tried using:
steal('that').then('this', function() {});
But i've the same results.....fail!!! anyone have any hints?
Ok i found the problem. There is nothing wrong with stealjs and canjs, but
canjs just load its own version of jquery
that will break my application. Now I need to find a way to load canjs and jquery separately (i use yii and some extensions need to have jquery loaded at a certain time so cannot wait for canjs).
Is the issue the version of jQuery or the order of dependencies?
You can configure steal via the stealconfig.js to use another version of jQuery and manage any dependencies.
An example can be found in the github repo: (this example does not show dependencies so i added one below)
https://github.com/bitovi/steal/blob/master/stealconfig.js
steal.config({
map: {
"*": {
"jquery/jquery.js": "jquery", // Map to path
"bootstrap/bootstrap.js": "bootstrap",
"can/util/util.js": "can/util/jquery/jquery.js"
}
},
paths: {
"jquery": "can/lib/jquery.1.8.3.js", // Path to jQuery
"bootstrap": "lib/bootstrap.js"
"yui/yui.js" : "can/lib/yui-3.7.3.js",
},
shim : {
jquery: {
exports: "jQuery"
},
bootstrap: { // A dependency example
'deps': ['jquery']
}
},
ext: {
js: "js",
css: "css",
less: "steal/less/less.js",
coffee: "steal/coffee/coffee.js",
ejs: "can/view/ejs/ejs.js",
mustache: "can/view/mustache/mustache.js"
}
});
Note: this is an untested example, hope this helps.
i had problem too with stealJs i have known that it work well with JavascriptMVC,
now i'm using AMD requireJs to dependency manage, an it works great with canjs.
here is the documentation http://canjs.com/guides/using-require.html, i hope that it help you!
I'm trying to build my require.js modules to one javascript file for production.
The command I'm running is...
r.js -o name=main out=main.min.js mainConfigFile=main.js
This compiles but the compiled main.min.js file is not compiled correctly and still includes the "define" statement blocks. and the browser obviously returns
Uncaught ReferenceError: define is not defined
My main.js file looks like:
require.config({
paths: {
jquery: 'libs/jquery/jquery',
},
shim: {
bootstrap: {
deps: ['jquery'],
exports: 'jquery'
}
}
});
require(['app', 'jquery'], function (app, $) {
'use strict';
// use app here
console.log(app);
console.log('Running jQuery %s', $().jquery);
});
Please let me know what I'm overlooking here.
Thanks!
You're correct, you need to include requireJS in your build. Take a look at http://requirejs.org/docs/optimization.html#onejs. You'll find an example for the command line there. If you're using a build profile it will look something like this -
({
baseUrl: "../Scripts",
paths: {
requireLib: 'libs/require'
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Quick fix: use r.js -o build.js instead of node r.js -o build.js
I had the problem when I was trying to call r.js through node:
node r.js -o build.js
Calling r.js directly fixed the problem:
r.js -o build.js
Note: r.js was installed globally with npm install -g requirejs