Getting Error when incorporating Bootstrap into Webpack configuration

Viewed 79

I'm currently attempting to incorporate Bootstrap into my React project that is using Webpack. I've sorted through a couple of issues trying to get Webpack setup to use Bootstrap but currently I cannot get past this issue. I've tried searching for answers, but haven't come up with any. I even followed the BootStrap documentation, but that didn't work. When I go to compile my JSX I'm getting the following error in the console.

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?, attributes?, insert?, base?, esModule? }
    at validate (/home/game-app/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/home/game-app/node_modules/style-loader/dist/index.js:25:28)
 @ ./src/index.jsx 4:0-46

I think I'm fairly close to getting it setup, but Webpack doesn't like how it's being served the bootstrap data. Any help on this issue would be greatly appreciated. I can provide my webpack.config file as well if necessary.

Thanks!

edit:

Webpack Config

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');

const htmlPlugin = new HtmlWebPackPlugin({
  template: './src/index.html',
  filename: './index.html',
});
module.exports = {
  entry: './src/index.jsx',
  output: { // NEW
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
  }, // NEW Ends
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

edit2:

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
0 Answers
Related