font-awesome webpack SyntaxError: Invalid or unexpected token

Question

I'm new to webpack and I'm having trouble getting font-awesome to install in my React set up.

Webpack V2.2.1
React starter kit

I've run:

npm install font-awesome --save-dev

Then in my main .scss file, I'm calling:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

And in my webpack.config.js I've got:

...
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff)(\?.*)?$/,
    loader: 'file-loader',
...

But on compile: yarn start I get the error:

webpack: Compiled successfully.
..\node_modules\font-awesome\fonts\fontawesome-webfont.eot:1
(function (exports, require, module, __filename, __dirname) { n�
                                                               ^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (..\build\webpack:\external "font-awesome\fonts\fontawesome-webfont.eot":1:1)
    at __webpack_require__ (..\build\webpack:\webpack\bootstrap 4b3091487663b7b04c64:19:1)

Is this a problem with my webpack setup? A problem with the loaders? Or a problem with paths? Or a problem with the fonts themselves?

Any help would be amazing.

Answer 1

As wuxiandiejia said, the problem was solved here by using a relative path - Even though looking at the error output, webpack was already looking in the correct place with the ~ declaration. Strange.

So instead of:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

I've used:

$fa-font-path: "../../../node_modules/font-awesome/fonts";
@import "../../../node_modules/font-awesome/scss/font-awesome";

And all seems to work!