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!
Related
I created a new project using durandal using its starter kit (http://durandaljs.com/get-started.html)
I then added materialize using bower (bower install materialze)
After adding materialize to require config of durandal
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1',
'hammerjs': '../lib/hammer/hammer',
'jquery.hammer': '../bower_components/materialize/js/jquery.hammer',
'materialize': '../bower_components/materialize/dist/js/materialize'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jquery'
},
'materialize': {
deps: ['jquery', 'hammerjs']
},
'jquery.hammer': {
deps: ['jquery', 'hammerjs', 'waves']
}
}
});
I end up in error -
Uncaught Error: Mismatched anonymous define() module: function ($, Hammer)
Actually, every time I refresh, I end up with different errors, which seems to point me to something messed up with require. My question is - if everything works rock solid before adding materialize, how does adding it make things so flaky?
Am I doing something wrong?
Your question is from 1 year, 9 months ago and now Materialize doesn't have jQuery as a dependency and I believe they no longer use hammer.js or they are about not to. Still this is something everybody runs into with Materialize and it is fixable!
First off, if you aren't in the habit of looking inside of your node_modules I encourage you to take a look and see if you can find hammer.min.js (I believe it is in the bundle you would have in 2016) or hammer.js because as soon as you can if you start looking at other people's source you will learn stuff faster. Some of these problems arise because you can install modules globally or locally and you gotta manage all the versions and it just goes on and on but this is the fun of npm and node package managers.
**
Quick Answer Begins Here:
**
Bower is deprecated but this issue effects you similarly if you use npm in 2018 and it would in theory help people using bower. You need to include the javascript dependencies (note that jQuery became optional recently with the release of version 1.0.0)
Example 1
This is what I do if I've installed my npm modules locally and I am making an electron application:
you are going to have the same problem with CSS so in foo.html you want:
<link href="./node_modules/materialize-css/dist/css/materialize.css" rel="stylesheet">
in bar.js you want:
window.Hammer = require('./node_modules/materialize-css/js/hammer.min.js')
Example 2:
I install my modules globally and want to pull in Materialize maybe I use grunt or webpack and in this contrived example im using jquery-2.1.4.min.js
In foo.js
window.$ = window.jQuery = require('../assets/jquery/jquery-2.1.4.min.js');
window.Hammer = require('../assets/hammer/hammer.min.js');
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.
I need to include a library that is present on github, but is not well-packaged; using Duo.js
At the moment of writing I am using the following to achieve what I desire:
bower
gulp
main-bower-files
Bower just downloades the library.
Gulp, with main-bower-files are useful to override the single package options and setup a so-called "main file" that I can build.
Example:
gulp.task('copy-libs', function () {
return gulp.src(bowerFiles({ env: 'development' }))
.pipe(gulp.dest('build/libs/'));
});
bower.json file:
"dependencies": {
"cash": "sudo-js/cash",
"bootstrap": "~3.3.2",
"delorean": "~0.8.7",
"react": "~0.12.2"
},
"overrides": {
"cash": {
"main": {
"development": "build/debug/cash.js"
}
}
}
}
How can i achieve this with duojs?
The documentation is quite thin regarding libraries that does not ship with a valid component.json
You can specify the path to an entry file for your lib. It won't be as clean as just specifying user/repo, but it'll get the job done.
For example, when including Twitter Bootstrap from twbs/bootstrap
require('twbs/bootstrap#v3.3.2:dist/js/bootstrap.js');
// repo: twbs/bootstrap
// version/tag: v3.3.2
// path: dist/js/bootstrap.js
Unfortunately, this doesn't work out-of-the-box since it assumes you have the jQuery global... so you need to add this above the previous line.
jQuery = require('components/jquery'); // leave out `var` so it becomes a global
This includes jQuery from the wonderful components project. (they package up popular libs so they can be consumed by various package managers.
Also, it turns out there is a components/bootstrap that is properly packaged with a component.json.
So, you can actually make bootstrap work with the following:
jQuery = require('components/jquery');
require('components/bootstrap');
For the other libraries that aren't as common, you can use the process mentioned first to specify the path to the right JS/CSS file. (ie: user/repo#version:path)
I'm trying to require the bootstrap-webpack module in my webpacked application.
It appears to need jQuery, since the bundled javascript then throws the following:
Uncaught ReferenceError: jQuery is not defined
How do I go about specifying to webpack that jQuery is a dependency for the bootstrap-webpack module, to fix this issue? It feels like it should be trivial, but I've been struggling to figure it out.
I've tried adding:
"jquery": "latest"
to the dependecies in the bootstrap-webpack's package.json, but this didn't work. The documentation is incomplete, and I can't seem to find much about this issue. It should be trivial, right? Help!
There are two possible solutions:
Use the ProvidePlugin: It scans the source code for the given identifier and replaces it with a reference to the given module, just like it has been required.
// webpack.config.js
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
Use the imports-loader: It provides the possibility to prepend preparations like require() statements.
// webpack.config.js
{
...
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
]
}
}
In that case you need to run npm install imports-loader --save before.
Via this github issue.
Install expose-loader and add require('expose?$!expose?jQuery!jquery'); to your main entry point just before you require webpack-bootstrap.
This will set jQuery on the window so any file can get at it. Be careful with this method all files will then have access to that version of jQuery regardless of whether it was explicitly required.
Getting mighty tired fighting to get requireJS to work in a predictable manner. Its debugging support is underwhelming.
My config.js file as follows:
require.config({
baseUrl: "Scripts",
paths: {
"jquery": "jquery-2.1.1.min",
"bootstrap": "bootstrap.min",
"knockout": "knockout-3.1.0"
},
shim: {
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
}
},
enforceDefine: true
});
require(["jquery", "bootstrap"], function ($, bootstrap) {
console.log("(A) loaded jq + bs");
if ($)
console.log("$ is present");
if (bootstrap)
console.log("bootstrap is present");
});
//# sourceMappingURL=Config.js.map
JavaScript in the /Scripts folder, which is where Config.js resides. 'jquery' is supposed to alias to a specific version, but when the browser loads it tries to load /Scripts/jquery.js
The aliased file /Scripts/jquery-2.1.1.min.js exists.
The same happens with bootstrap - it loads boostrap.js instead of bootstrap.min.js
I hate the way requireJS has this arcane way of mixing different behaviours into the same path setting, which changes based on string contents.
This link may help you.. the configuration file is being loaded asynchronously and has not been executed when you first call require()
Check this one
Require JS is ignoring my config