BlueprintJS is not loading its icon CSS module, but is able to load the core CSS module

Question

I'm learning to incorporate BlueprintJS into my React web app, and having a lot of trouble loading in some of the CSS modules.

I've installed npm install @blueprintjs/core and npm install react-transition-group.

The BlueprintJS Getting Started Docs say to load in the CSS files like this:

 // or, using node-style package resolution in a CSS file: 
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

I'm currently using webpack for my build tool, so I've included the following configurations in my webpack.config.js:

However, when I attempt to build my bundle.js, I receive this error message when including the ~@blueprintjs/icons/lib/css/blueprint-icons.css file:

ERROR in ./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css 7:296-341
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./js/styles/styles.scss
 @ ./js/styles/styles.scss
 @ ./js/app.js
 @ multi ./js/app.js

I do not, however, receive this error when importing in the core blueprint.css file. The error message appears to be suggesting that my loaders are having trouble parsing the ~ symbbol. However, I don't understand why it has no issue parsing the line right before it (@import "~@blueprintjs/core/lib/css/blueprint.css";).

Could someone steer me in the right direction for why this error is happening?

Answer 1

After looking at exactly where the error was coming from (./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot), I realized that webpack wasn't able to load in .eot files, hence the Module parse failed: Unexpected character '' (1:0) error message.

The issue here for me was not having the appropriate loaders. There are a bunch of .eof and .woff files that Blueprint uses internally that need special loaders (file-loader and url-loader).

  {
    test: /\.(ttf|eot|svg)$/,
    use: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[hash].[ext]',
      },
    },
  },
  {
    test: /\.(woff|woff2)$/,
    use: {
      loader: 'url-loader',
      options: {
      name: 'fonts/[hash].[ext]',
      limit: 5000,
      mimetype: 'application/font-woff',
    },
  },
}