CODEWITHSUNDEEP
reactjstwitter-bootstrapwebpackbabel-loaderwebpack-loader
ninsau
ninsau

Reputation: 1016

Webpack Module parse failed with bootstrap css

I'm trying to build with webpack

npm run build

But I get the following error

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders @charset "UTF-8";/*! | * Bootstrap v5.0.2 (https://getbootstrap.com/) | * Copyright 2011-2021 The Bootstrap Authors

My webpack config looks like this

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./paginate.js",
  output: {
    path: path.resolve("./"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  module: {
    rules: [
      {
        test: /\.js|jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ],
  },
  externals: {
    react: "react",
  },
};

.babelrc file looks like

    {
  "presets": ["@babel/preset-env", ["@babel/preset-react", {
     "runtime": "automatic"
  }]]
}

I've searched but can't seem to find the right loader for this.

Upvotes: 0

Views: 2709

Answers (1)

user16435030
user16435030

Reputation:

I'm not sure, just a guess, most likely bootstrap is trying to import CSS or scss and you don't have a loader for it defined.

Try adding:

{
  test: /\.s?[ac]ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  exclude: [/node_modules/],
},

To your webpack rules and also install those modules with --save-dev.

Side node, this regular exression test: /\.js|jsx?$/, is incorrect, just use test: /\.jsx?$/,. The "?" means the x is optional.

Upvotes: 2

Related Questions