jquery - Webpack - $ is not a function -


i moving existing webapp requirejs webpack.

i have issue way jquery imported/shimmed.

in bundled js, getting $ not function error within bootstrap javascript.

when console.log($) within bundled script reveals empty object: object {}

i assuming because nothing exported jquery traditionally set $ window object , done.

some research pointed me use webpack plugins (see webpack.config.js below) doesn't appear solve issue.

is there wrong in setup?

thanks

my webpack.config.js:

    var path = require('path'); var webpack = require('webpack'); module.exports = {     //devtool: 'source-map',  entry: ['./mobile.js'], resolve: {     root: "./js/",     alias: {          jquery: 'libs/jquery-1.9.1',         underscore: "libs/lodash-1.0.1",         //backbone: 'libs/backbone-1.0.0',         backbone: 'libs/backbone-0.9.10',         bootstrap: "libs/bootstrap-2.3.1",         ......     } }, resolveloader: {     root: path.join(__dirname, 'node_modules') }, output: {     path: './',     filename: 'bundle.js' }, plugins: [     new webpack.provideplugin({         $: "jquery",         jquery: "jquery",         "window.jquery": "jquery"     }) ], module : {     loaders: [         { test: /\.html$/, loader: "text" },         { test: /\.json$/, loader: "json" }     ]      } } 

the offending compiled bundle code:

/***/ function(module, exports, __webpack_require__) {      /* webpack var injection */(function(__webpack_provided_window_dot_jquery) {/* ===================================================      * bootstrap-transition.js v2.3.1      * http://twitter.github.com/bootstrap/javascript.html#transitions      * ===================================================      * copyright 2012 twitter, inc.      *      * licensed under apache license, version 2.0 (the "license");      * may not use file except in compliance license.      * may obtain copy of license @      *      * http://www.apache.org/licenses/license-2.0      *      * unless required applicable law or agreed in writing, software      * distributed under license distributed on "as is" basis,      * without warranties or conditions of kind, either express or implied.      * see license specific language governing permissions ,      * limitations under license.      * ========================================================== */       !function ($) {          console.log($); //this gives empty object {}       "use strict"; // jshint ;_;         /* css transition support (http://www.modernizr.com/)        * ======================================================= */        $(function () { //$ not function occurs here          $.support.transition = (function () { ......... ......... 

you can try exports-loader:

npm install --save-dev exports-loader 

and config:

{    include: require.resolve('libs/jquery-1.9.1'),    loader: 'exports-loader?window.jquery' } 

or problem can in providerplugin doesn't read jquery alias, try:

new webpack.provideplugin({     $: "libs/jquery-1.9.1",     jquery: "libs/jquery-1.9.1",     "window.jquery": "libs/jquery-1.9.1" }) 

Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -