Usage webpack with bower

npm reactjs bower webpack

10,272

First, maybe you just forgot, but to be sure, I want to point out that it seems you showed us the jquery bower.json file in your question. Your project doesn't actually seem to have a bower.json file at its root.

If you want to use Bower to manage dependencies, make sure you have a bower.json by running bower init at the root of your project and then run for instance bower install --save jquery.

See the bower doc for more info ;)

Besides that, the problem is that you're trying to use jQuery in index.html, so not in a webpack-managed module.
Webpack is not actually processing anything on your index.html.

What I mean is, put your jQuery code in index.jsx, instead of putting it in index.html:

// index.jsx
$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

And it should work!

You can also remove this code, since the BowerWebpackPlugin handles that for you:

alias: {
   jquery: "./bower_components/jquery/dist/jquery.js"
}

How does it work?

index.jsx is loaded through Webpack.
$ is used as a free variable, but thanks to the ProvidePlugin, it will resolve to require("jquery")
require("jquery") resolves to import jQuery from the bower components folder thanks to the BowerWepackPlugin.

Without the ProvidePlugin and only the BowerWebpackPlugin, you would have had to write:

// index.jsx
var $ = require("jquery");

$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

10,272

Author by

Matt

Updated on June 04, 2022

Comments

Matt almost 2 years

I have a basic ReactJS application. I use webpack and would like to use moduls from bower. I installed bower-webpack-plugin and add jquery library in bower.

webpack.config.js

var BowerWebpackPlugin = require("bower-webpack-plugin");
var webpack = require("webpack");

module.exports = {
    entry: './index.jsx',
    output: {
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/assets'
    },
    module: {
        loaders: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            }
        ]
    },
    plugins: [
        new BowerWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
        })
    ],
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            jquery: "./bower_components/jquery/dist/jquery.js"
        }
    }
}

Edit: Now I am using this webpack config with bower dependencies and without bower-webpack-plugin

bower.json

{
  "name": "jquery",
  "version": "2.1.4",
  "main": "dist/jquery.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "build",
    "dist/cdn",
    "speed",
    "test",
    "*.md",
    "AUTHORS.txt",
    "Gruntfile.js",
    "package.json"
  ],
  "devDependencies": {
    "sizzle": "2.1.1-jquery.2.1.2",
    "requirejs": "2.1.10",
    "qunit": "1.14.0",
    "sinon": "1.8.1"
  },
  "keywords": [
    "jquery",
    "javascript",
    "library"
  ]
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic Property Grid</title>
    <!-- include react -->
    <script src="./node_modules/react/dist/react-with-addons.js"></script>
</head>
<body>
    <div id="content">
        <!-- this is where the root react component will get rendered -->
    </div>
    <!-- include the webpack-dev-server script so our scripts get reloaded when we make a change -->
    <!-- we'll run the webpack dev server on port 8090, so make sure it is correct -->
    <script src="http://localhost:8090/webpack-dev-server.js"></script>
    <!-- include the bundle that contains all our scripts, produced by webpack -->
    <!-- the bundle is served by the webpack-dev-server, so serve it also from localhost:8090 -->
    <script type="text/javascript" src="http://localhost:8090/assets/bundle.js"></script>

    <script type="text/javascript">

$(document).ready(function(){
 $("body").append("This is Hello World by JQuery");
});

</script>

</body>
</html>

When I open main page, I get error message: "$ is not defined".

project structure

Matt over 8 years

I tried it, but it didn't help. Please see my edited question.
François Richard over 8 years

My bad I forgot the alias field, I edited my answer let me know if it's good now
François Richard over 8 years

This is the direction to take you may have other issue idk but at some point you'll write this part :) . By the way I don't think you need to have index.jsx, index.html would be fine
gtournie over 8 years

First, sometimes you have to deal with legacy code and need to access to $ in the view. Or you just need it to access it in your console, which is more convenient. More, there is a real bug with the BowerWebpackPlugin, see: github.com/lpiepiora/bower-webpack-plugin/issues/14