webpack with react-bootstrap-table getting error jQuery not found

Question

I have small utility project where I am using react bootstrap table. I am bundling this project using webpack to use into some different project. my webpack config file is look like this. When I am running gulp into the main project where I have imported the utility package; I am getting following error.

Error: Cannot find module 'jquery' from 'C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\src\javascript\components\dnsIpam'
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
at process (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

webpack config file

const path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var build = 'dns-ipam';

// shared config settings
var config = {
  module: {
    loaders: [
      { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(less|css)$/, loader: ExtractTextPlugin.extract('style-loader',
        'css-loader!less-loader') },
      { test: /\.(png|jpg|gif|jpeg|svg)$/,
        loader: 'file?name=images/[name].[ext]' },
      { test: /\.(ttf|woff|eot|otf)$/,
        loader: 'file?name=fonts/[name].[ext]' },
      { test: /\.json$/,
        loader: 'json' },
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: `${build}-react-components.js`,
    library: `${build}-react-components`,
    libraryTarget: 'umd',
  },
  plugins: [
    new ExtractTextPlugin(`${build}-react-components.css`),
    new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery',}),
  ],
  externals: [{
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
    },
  }, {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
    },
  }],
};

// custom config settings
config.entry = './src/components/dns-ipam-index.js';

// if (build == 'dns-ipam') {
//   config.plugins.push(new webpack.optimize.UglifyJsPlugin({
//     compress: { warnings: false },
//   }));
// }


module.exports = config;

did you installed package 'jquery' using `npm install --save jquery`? — Fazal Rasel, Jul 04 '17 at 11:18
@Sunny Have you install jquery? If not install it first like mentioned above and import it like this: import jQuery from 'jquery' — Upasana, Jul 04 '17 at 16:04
react-bootstrap has an internal dependency for jQuery so it has been installed. Even though I have separately installed it but the same issue. Where to import? — Sunny, Jul 04 '17 at 16:24

score 2 · Answer 1 · answered Jul 24 '17 at 12:35

React-bootstrap has an internal dependency with jQuery.

I can see that you are explicitly excluding node modules, therefore your code won't be able to use those dependencies. exclude: /node_modules/

I will suggest you to split your code and create a vendor config, and there explicitly include jquery and react-bootstrap-table

var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "react-bootstrap-table", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

score 0 · Answer 2 · answered Jul 20 '17 at 16:57

0

Place your downloaded JQuery file in the your project's root folder and use it in your HTML file like this -

<script type="text/javascript" src="jquery-1.9.1.min.js">

answered Jul 20 '17 at 16:57

koolkat

706
3
8
23

webpack with react-bootstrap-table getting error jQuery not found

2 Answers2