Error: Bootstrap's JavaScript requires jQuery
gangster opened this issue · 14 comments
I've tried everything but the right thing. I'm early in the process of learning Webpack, and I am trying to get bootstrap-sass-loader working. I keep getting the following error when I execute npm run dev:
> webpack-dev-server --devtool eval --hot --progress --colors --content-base build
70% 2/2 build moduleshttp://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/josh/jibe/webpack/build
30% 2/6 build modules
/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
throw e;
^
Error: Bootstrap's JavaScript requires jQuery
at Object.<anonymous> (/Users/josh/jibe/webpack/node_modules/bootstrap-sass/assets/javascripts/bootstrap.js:8:9)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at DependenciesBlock.loadPitch (/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
at DependenciesBlock.doBuild (/Users/josh/jibe/webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
at DependenciesBlock.build (/Users/josh/jibe/webpack/node_modules/webpack/lib/NormalModule.js:67:14)
My webpack.config.js is as follows:
'use strict';
var webpack = require('webpack');
var config = {
addVendor: function(name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp(path));
},
entry: {
app: ['./app/main.js',"bootstrap-sass!./bootstrap-sass.config.js",'webpack/hot/dev-server'],
vendors: ['react']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
})
],
output: {
path: './build',
filename: 'bundle.js'
},
resolve: {
extensions: ['','.js','.json','.jsx']
},
module: {
noParse: ['react'],
loaders: [
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.js$/, exclude: [/node_modules/], loader: 'babel-loader' },
{ test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded" }
]
}
};
module.exports = config;package.json
{
"name": "jibe-ui",
"version": "0.1.0",
"main": "app/main.js",
"scripts": {
"dev": "webpack-dev-server --devtool eval --hot --progress --colors --content-base build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^5.2.16",
"babel-loader": "^5.0.0",
"extract-text-webpack-plugin": "^0.7.1",
"react": "^0.13.2",
"webpack": "^1.8.11",
"webpack-dev-server": "^1.8.2"
},
"dependencies": {
"bootstrap": "^3.3.4",
"bootstrap-sass": "^3.3.4",
"imports-loader": "^0.6.3",
"jquery": "^2.1.4",
"jsx-loader": "^0.13.2",
"node-sass": "^2.1.1",
"sass-loader": "^0.6.0",
"style-loader": "^0.12.2"
}
}bootstrap-sass.config.js
module.exports = {
verbose: true, // print out your custom files used
debug: false, // print out the full generated scss file
styleLoader: "style-loader!css-loader!sass-loader", // see example for the ExtractTextPlugin
scripts: {
// add every bootstrap script you need
'transition': true
},
styles: {
// add every bootstrap style you need
"mixins": true,
"normalize": true,
"print": true,
"scaffolding": true,
"type": true,
}
};Was hoping you could shed some light on wtf it is I am doing wrong. Thanks a bunch.
did you get this figured out? I don't run the dev server like that. Check out this for an example: https://github.com/justin808/react-webpack-rails-tutorial
i get a nearly identical issue as @gangster
this is my webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'./app/main.jsx',
'bootstrap-sass!./bootstrap-sass.config.js'
],
output: {
filename: 'bundle.js',
publicPath: 'http://localhost:8090/build'
},
module: {
loaders: [
{ test: /\.jsx?$/, loader: 'babel' }
{
test: /\.scss$/,
loader: "style!css!sass?outputStyle=expanded&includePaths[]=" +
(path.resolve(__dirname, "./node_modules"))
},
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" }
]
},
externals: {
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};this is my bootstrap-sass.config.js:
module.exports = {
verbose: true,
preBootstrapCustomizations: "./_pre-bootstrap-customizations.scss",
bootstrapCustomizations: "./_bootstrap-customizations.scss",
mainSass: "./_main.scss",
styleLoader: "style-loader!css-loader!sass-loader",
// scripts: {
// 'transition': true,
// 'alert': true,
// 'button': true,
// 'carousel': true,
// 'collapse': true,
// 'dropdown': true,
// 'modal': true,
// 'tooltip': true,
// 'popover': true,
// 'scrollspy': true,
// 'tab': true,
// 'affix': true
// },
styles: {
"mixins": true,
"normalize": true,
"print": true,
"scaffolding": true,
"type": true,
"code": true,
"grid": true,
"tables": true,
"forms": true,
"buttons": true,
"component-animations": true,
"glyphicons": true,
"dropdowns": true,
"button-groups": true,
"input-groups": true,
"navs": true,
"navbar": true,
"breadcrumbs": true,
"pagination": true,
"pager": true,
"labels": true,
"badges": true,
"jumbotron": true,
"thumbnails": true,
"alerts": true,
"progress-bars": true,
"media": true,
"list-group": true,
"panels": true,
"wells": true,
"close": true,
"modals": true,
"tooltip": true,
"popovers": true,
"carousel": true,
"utilities": true,
"responsive-utilities": true
}
};and this is my package.json:
{
"name": "show-me-the-money",
"version": "1.0.0",
"description": "learning react w/ little sis",
"main": "app/main.jsx",
"scripts": {
"build": "webpack",
"start": "npm run serve | npm run dev",
"serve": "./node_modules/.bin/http-server -p 8080",
"dev": "webpack-dev-server --devtool eval --progress, --colors, --hot, --content-base build --port 8090",
"test": "jest"
},
"repository": {
"type": "git",
"url": "https://github.com/aguestuser/show-me-the-money.git"
},
"author": "aguestuser",
"license": "gpl",
"bugs": {
"url": "https://github.com/aguestuser/show-me-the-money/issues"
},
"jest": {
"scriptPreprocessor": "./preprocessor.js",
"moduleFileExtensions": [
"js",
"jsx"
],
"unmockedModulePathPatterns": [
"react",
"superagent"
]
},
"homepage": "https://github.com/aguestuser/show-me-the-money/",
"dependencies": {
"bootstrap-sass": "^3.3.4",
"css-loader": "^0.13.1",
"imports-loader": "^0.6.3",
"jquery": "^2.1.4",
"node-sass": "^3.1.2",
"react": "^0.13.3",
"react-bootstrap": "^0.22.6",
"sass": "^0.5.0",
"sass-loader": "^1.0.2",
"style-loader": "^0.12.2",
"superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^5.4.7",
"babel-loader": "^5.1.3",
"http-server": "^0.8.0",
"jest-cli": "^0.4.5",
"jsx-loader": "^0.13.2",
"node-libs-browser": "^0.5.0",
"react-hot-loader": "^1.2.7",
"react-tools": "^0.13.3",
"webpack": "^1.9.5",
"webpack-dev-server": "^1.8.2"
}
}would love any pointers. have been stalled out at the starting line for about a day trying to get started with this library -- which i would otherwise LOVE to use!!!
The error is: Error: Bootstrap's JavaScript requires jQuery
Can you take a look at https://github.com/justin808/react-webpack-rails-tutorial/ and try to emulate that?
Look at the two config files for the hot loading and for the webpack to rails version, and compare those to what you have.
figured it out! (and this is really dumb.) i had bootstrap-sass installed, but not bootstrap-sass-loader! @gangster: from what i can tell from your package.json file, you're in the same situation.
try:
$ npm install bootstrap-sass-loader --saveand see if that works?
@aguestuser What caused that? Just an omission? Could the docs be better? Any help on a PR is GREATLY appreciated!
This helped to me too, thanks @aguestuser.
+1 @aguestuser - thank you
Thanks to all. I hope this discussion helped.
FWIW, I ran into a similar symptom, but it was caused by a bad dependency:
The only moral of that story is that the error message seemed totally unrelated to the real cause of the issue.
Thanks @aguestuser !
For me, the solution was just to add the variable to the window for it to be globally accessible.
window.jQuery = require('jquery');
var bootstrap = require('../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js');
@gbrits tnx for great solution! I was missing with this jQuery declaration in window scope
But I change the path to bootstrap-sass JS library, so my full declaration code looks like this:
var jQuery = require("jquery");
var $ = jQuery;
window.jQuery = require('jquery');
var bootstrap = require("bootstrap-sass/assets/javascripts/bootstrap.js");
Both - jQuery and Bootstrap, works well now. 😄
I removed bootstrap.min.js from .angular-cli.json file and it resolved error .