0

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.

ninsau
  • 518
  • 2
  • 5
  • 18

1 Answers1

2

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.

  • I get this `Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (1:1) Unknown word 1 | import React from "react"` – ninsau Aug 07 '21 at 01:21
  • Which I think means that for some reason your css loader is now trying to parse javascript. Make sure you still have the first rule you had, you should have both rules. Also your webpack needs ````resolve: { extensions: ['.js'], },```` –  Aug 07 '21 at 01:26