CODEWITHSUNDEEP
twitter-bootstrapreactjs
Buttersnips
Buttersnips

Reputation: 47

Webpack fails to compile when bootstrap is added

Im trying to get the bootstrap components on my react app to work .
I have followed the guides https://dzone.com/articles/adding-react-bootstrap-to-a-react-app and https://github.com/facebookincubator/create-react-app/issues/301 .

When I import the import 'bootstrap/dist/css/bootstrap.css'; into my index.js. I get this error on webpack .
enter image description here

My webpack.config.js is as follows . 

     module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Upvotes: 0

Views: 1292

Answers (2)

O.O
O.O

Reputation: 1419

I know this is an old thread but I had the same issue with bootstrap and webpack, but importing it directly into my css file solved this issue.

Hope it helps someone.

/*package.json*/
"dependencies": {
  "bootstrap": "4.3.1"
},
/*css|scss file*/

@import '~bootstrap/scss/bootstrap.scss';

Upvotes: 0

codejockie
codejockie

Reputation: 10912

You need style-loader and css-loader to work with css files. 

...
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ],
  },
...

Note: That config is for Webpack 2+.

For Webpack 1:

...
module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
...

Simply install style-loader and css-loader.

npm i css-loader style-loader -S

Upvotes: 1

Related Questions