Webpack problems importing font-awesome library

Question

I'm building a React application that will require font-awesome CSS to be imported, but I'm getting an error saying that the module cannot parse the woff2 files.

Below is my code:

import React from 'react';
import ReactDOM from 'react-dom';

require('css!../node_modules/bootstrap/dist/css/bootstrap.css')
require('css!../node_modules/font-awesome/css/font-awesome.css')

import '../node_modules/bootstrap/dist/js/bootstrap.js'

import Dashboard from './components/Dashboard/Dashboard';

ReactDOM.render(
  <Dashboard/>,
  document.getElementById('react-container')
);

This is the error I'm getting in the browser:

When running on browser I'm getting the following error:
bundle.js:669 ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: D:\DEV\airwaysprj\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
    at Parser.pp$4.raise (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\DEV\airwaysprj\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp$3.parseIdent (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (D:\DEV\airwaysprj\fways\node_modules\acorn\dist\acorn.js:1597:21)
 @ ./~/css-loader!./~/font-awesome/css/font-awesome.css 6:479-532
  [1]: https://webpack.github.io/docs/stylesheets.html

And my webpack.config.js file:

var path = require('path');

module.exports = {
    entry: "./client/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
        publicPath: "/dist"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            },
        ],
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader']
            },
            {
                test: /images\/.*\.(png|jpg|svg|gif)$/,
                loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
            },
            {
                test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'file-loader?name="[name]-[hash].[ext]"',
            }
        ]
    },
    watch: true
}

Help appreciated to solve this issue.

score 3 · Accepted Answer · answered Jan 20 '17 at 15:40

This configuration for webpack.config.js from here solved the problem:

var config = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }
};

module.exports = config;

Glad that you found the solution, Thanks for sharing :) – Hardik Modha Jan 20 '17 at 16:31 — Hardik Modha, Jan 20 '17 at 16:31

Hardik Modha · Answer 2 · 2017-01-19T15:26:02.890

1

You'll need to remove ?v=4.7.0

You can see that your current regex does not match the end part ?v=4.7.0. So either you can remove that end part or modify your regex to allow it at the end.

/fonts\/.*\.(woff|woff2|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$

Above regex will allow versions at the end.

Optionally, You can also write the above regex like this,

/fonts\/.*\.(woff(2)?|eot|ttf|svg)?(\?v=[0-9]\.[0-9]\.[0-9])?$

edited Jan 19 '17 at 15:26

answered Jan 19 '17 at 03:25

Hardik Modha

12,098
3
36
40

1

I neither did not specified v4.7.0 in my code nor have a file that contains v4.7.0. I don't know where is that v.4.7.0 is coming from. The solution does not work. – Mendes Jan 20 '17 at 15:12

score -1 · Answer 3 · answered Jan 19 '17 at 01:44

-1

I think your /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/ can not match /fonts/fontawesome-webfont.woff2?v=4.7.0. the end of the font file path is ?v4.7.0. try to remove the $.

answered Jan 19 '17 at 01:44

wuxiandiejia

851
1
10
15

I neither did not specified v4.7.0 in my code nor have a file that contains v4.7.0. I don't know where is that v.4.7.0 is coming from, and that is the problem. Removing the $ made no difference. – Mendes Jan 20 '17 at 15:12

Webpack problems importing font-awesome library

3 Answers3

Linked