jQuery needed for Bootstrap in React project

Question

I am developing a React.js project where instead of using React-Bootstrap, I am loading the CSS of Bootstrap into my project. I am now needing to import the jQuery so that I can use dropdown menus etc.

Entry point file (index.js) - in the hope it would work

'use strict'
import React from 'react'
import { Route, Router, IndexRoute, browserHistory } from 'react-router'
import { render } from 'react-dom'

// Pages
import Main from './pages/main/main'
import Home from './pages/home/home'
import About from './pages/about/about'
window.jQuery = window.$ = require('jquery/dist/jquery.min')
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'

render((
  <Router history={browserHistory}>
    <Route name='home' path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route name='about' path='about' component={About} />
    </Route>
  </Router>), document.getElementById('app'))

Webpack file

'use strict'
const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: [
    './browser/index'
  ],
  output: {
    path: path.join(__dirname, 'public', 'js'),
    filename: 'bundle.js',
    publicPath: '/public/js/'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      { test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: [ 'es2015', 'react' ]
        },
        include: path.join(__dirname, 'browser')
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
      { test: require.resolve('jquery'), loader: 'imports?jQuery=jquery' }
    ]
  }
}

The error appears in Chrome Dev tools: 'Bootstrap's Javascript requires jQuery'. I'm wondering whether perhaps I am missing something in terms on loaders in the webpack file, or need an import statement in the entry file?

Try moving your jquery import in your webpack file above your babel-loader. — Jack
– Jack, Commented Jun 20, 2016 at 21:59
The error still remains sadly. In my package.json - "jquery": "^3.0.0" if that is any help? — Tom Hanson
– Tom Hanson, Commented Jun 20, 2016 at 22:09

Sergiu Dogotaru · Accepted Answer · 2016-06-29 14:55:06Z

3

Please make sure you have installed 'imports-loader', (npm install --save imports-loader). And in module.exports try this:

{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }

The really nice post regarding it I've found here: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

answered Jun 29, 2016 at 14:55

Sergiu Dogotaru

3951 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ago · Accepted Answer · 2017-05-30 16:25:55Z

1

Unfortunately provided solution doesn't work for me. In the case above Bootstrap and jQuery are both installed as npm dependencies under node_modules directory? I'm using WebPack 2, so I have converted the loader element as follows:

{
        test: /bootstrap.+\.(jsx|js)$/,
        use: 'imports-loader?jQuery=jquery,$=jquery,this=>window',
        exclude: /node_modules/
}

answered May 30, 2017 at 16:25

ago

111 bronze badge

Collectives™ on Stack Overflow

jQuery needed for Bootstrap in React project

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related