Im using the Yeoman Webapp generator with Modernizr (and Bootstrap and Sass/Compass in case that matters).
I have the following in my main.js file:
$(function() {
'use strict';
Modernizr.addTest('svgasimg', document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1'));
if (!Modernizr.svgasimg) {
//Do stuff
}
});
Jshint is giving me a "Modernizr not defined" error.
Any help would be very much appreciated.
Many thanks in advance.
JSHint is complaining because Modenrizr is not builtin to javascript. You just need to add "Modernizr" to the globals list of jshint
either like
/* global Modernizr */
at the top of the file, or just listed in the globals array in a .jshintrc/Gruntfile
Related
Trying to grok how to work with js files in Rails 7 using the jsbundling-rails gem and ES modules...
In short, I want to code up functions and have them available in the page.
Here's a simple example. Working with app/javascript/controllers/application.js....
If I paste
alert("HI");
I get an alert in the browser so I know I'm in the right file.
Now, if I paste a simple function
function hello() {
alert("hello");
}
That function does not appear in the compiled js file.
I've tried including the export keyword in front of the function as well...
export function hello() {
alert("hello");
}
I don't know if it's the gem or the way I am writing javascript, but I'm not sure how to proceed.
window.hello = function(){
alert("hello");
}
I'm in the process of migrating a Rails 5.1.5 project, which uses CoffeeScript, from using sprockets to using webpacker. The project also uses select2.js. With sprockets, I did the following:
Install jquery-rails (jQuery is a dependency for select2).
Put select2.js code in vendor/assets/javscripts.
In application.js.coffee, add:
#= require select2
After that I was able to use select2 to in my application.js.coffee file:
$(document).on 'turbolinks:load' ->
$('select').select2
So far I've described the pretty standard way of including/using javascript libraries with sprockets.
However, with webpacker I can't make select2 work and I'm not sure why. I have two hypothesis:
I'm not importing/requiring it properly;
it doesn't find jQuery at some point of the load process;
So for jQuery, I did the following:
yarn add jquery
included in my environment.js:
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}));
I've removed the jquery-rails gem, as well as #= require 'jquery' and tested that jquery works, so I guess I have correctly included it. However, I tried several ways of importing select2 (using es6 imports) and none of them worked. I tried:
import select2 from 'select2';
import select2 from 'select2/dist/js/select2'
import select2 from 'select2/dist/js/select2.js'
import 'select2/dist/js/select2.js'
I even tried to import it from the old vendor location by writing inside app/javascript/pack/application.js.coffee:
import '../../../vendor/assets/javascripts/select2'
I can confirm that the file contents is imported, as I put a console.log within the select2 file under node_modules/select2/dist/js/select.js and it did get printed. However, I also get the error TypeError: $(...).select2 is not a function when I execute $('select').select2() in the browser's dev tool console.
What am I missing or doing wrong?
P.S. I can provide much more info, but I didn't want my question to get any more bloated.
P.P.S. With my modest JS knowledge, I looked at the source code but couldn't recognize what exactly they are exporting and how am I supposed to import it.
I know this is an old post, but just in case someone else could benefit:
app/javascript/packs/application.js
...other requires...
require('select2')
window.Rails = Rails
import 'bootstrap'
...other imports...
import 'select2'
import 'select2/dist/css/select2.css'
$(document).on("turbolinks:load", () => {
$('.select2').select2()
})
My similar problem
I have stumble upon the same problem with another web component (Switchery):
I imported the component with yarn add switchery (no error)
I could import it correctly through WebPack with import 'switchery' (no error bundling the pack)
But when I was trying to use the Switchery object in the browser like they say in the doc:
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
I would get the error: ReferenceError: Switchery is not defined
Note: I didn't want to install RequireJS as WebPack is supposed to do the same thing (and even better) nowadays.
My solution:
The problem was the webpack doesn't expose the pack-generated variables and classes in the global scope!
So to fix this, I needed to do two things:
Explicitly give a name to the imported class from Switchery:
import Switchery from 'switchery'
Use this Class only in the same JS file where the import was done
Testing hack:
If you want to try that out and "go back" to the mess that sprocket allowed, in the same file, you can expose "globally" the variable so you can use in from the browser:
import Switchery from 'switchery'
window.Switchery = Swicthery
now you can execute the switchery almost like in the example:
var init = new window.Switchery(elem);
Hope that helps...
Bower and main-bower-files are fantastic, however, when using them with Angular Bootstrap UI, more things are installed/included than required.
Basically : Angular Bootstrap UI, replaces the need for bootstrap.js and it's jquery dependency. However when installing bootstrap, jquery gets installed, then my gulp task which uses main-bower-files, includes jquery and bootstrap.js in my html files.
Is there a way to tell bower, and/or main-bower-files and/or Bootstrap, that jquery and bootstrap.js are not required anymore.
So far I tried commenting the jquery dependency and dist/js/bootstrap.js lines in bower_components/bootstrap/bower.json, but the files are still being included.
1) Switch to wiredep, which I'd recommend. Then you can do something like this:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap']
}))
.pipe(gulp.dest('app'))
});
Note that the above will remove the whole bootstrap, not just its .js files. The exclude array can contain also regexps, which is what is probably needed if you want to retain for instance styles.
And in your HTML file (for javascript):
Replace the js with css where you want to inject styles.
2) Override the bower main files for Bootstrap: provide the following options to main-bower-files:
{
"overrides": {
"bootstrap": {
"main": [
// files you want to include
]
}
}
}
You'll have to check what you don't want to exclude and add them to the main array above.
See also: https://github.com/ck86/gulp-bower-files/issues/33
I am just getting started on a new project which I would like to write in ReactJS. I am trying to use Broserify to bundle everything so that I can have it in multiple js files.
However, when I try to bundle my react file (browserify main.js > bundle.js), I get this error:
"Error: Parsing file /Users/Kathleen/Documents/Referral_Site/main.js: Unexpected token (3:4)"
main.js looks like this:
var Lander = require('./lander');
React.render(
<Lander />,
document.getElementById('content')
);
What's breaking the parser? Thanks in advance!
EDIT: also, I included react in the surrounding html like this:
<script src="http://fb.me/react-0.12.2.js"></script>
is there some way that I need to include it in main.js as well?
You must compile JSX to plain JS first, there is plugin for browserify.
https://www.npmjs.com/package/reactify
I want to include jQueryUI in my backbone.js app using RequireJS. The main.js file included in my index.html is as follows:
require.config({
paths: {
jquery: 'libs/jquery/jquery-1.7.2.min',
jqueryui: 'libs/jquery/jquery-ui-1.8.18.custom.min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-optamd3-min',
text: 'libs/require/text',
templates: 'templates'
}
});
require(['app'], function(App){
App.start();
});
And for each model/view/router file, I just include the 'jquery' namespace at the start of the "define" block as follows:
define([
'jquery',
'underscore',
'backbone',
'views/categoryview',
'text!templates/category.html'
], function($, _, Backbone, CategoryView, categoryTemplate){
// Here comes my code
});
But the jQueryUI could not be used in these files. Is there something wrong with my code? Or should I also include the "jqueryui" in each "define" block? But if I include "jqueryui" in the "define" block, How should I name it in the function to avoid name conflict with jquery?
While kujakettu's answer is at least partially correct I also had to specify jQuery as a dependancy in my shim to be sure jQuery was loaded before jQuery-UI.
e.g.
require.config({
baseUrl: 'scripts/modules',
paths:{
jquery:'../libs/jquery',
jqueryUI:"../libs/jquery-ui",
underscore:'../libs/underscore',
backbone:'../libs/backbone'
},
shim: {
jqueryUI: {
deps: ['jquery']
},
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
waitSeconds: 15
}
});
Quite old post. There's a tool available to convert jquery ui files to AMD version, created by jrburke. Hope it would be useful!
You can include all files that only patch some other object (like jQuery UI) in your main file as follows (you need to make sure jQuery is loaded before jQuery UI):
require(['jquery', 'app', 'jqueryui'], function ($, App) { App.start(); });
Another approach is to include jQuery UI in every module as you already mentioned.
I personally prefer first approach even though it's hiding dependencies.
The other answers are a bit outdated now. JQuery UI comes with AMD support. If you want the whole project just use bower install jquery-ui and then add it to paths. No shim needed.
If you want to load a subset of jQuery UI that you need in your app (while not loading extra bloat) then just use bower install jquery-ui to get the whole thing then use RequireJS build tool called r.js to create an AMD package of exactly the files you need.