Webpack can't find (font) dependencies - laravel

Question

NPM/Webpack can't find dependencies with Laravel Mix
These dependencies were not found:
* font-awesome
* ionicons
ERROR in multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
Module not found: Error: Can't resolve 'font-awesome' in 'D:\Laragon'
# multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
More clearly. These are installed (can find them in node_modules) and require location is correct. I'm also using more packages, and these problems are related to, coincidentally, the only fonts in my webpack.
They are available in the package.json and package.json.lock.
Installed trying different methods: firstly npm install and --save-dev, also tried yarn install and yarn add.
My webpack.mix.js:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
module: {
loaders: [
{
test: /\.js?/,
exclude: [/node_modules/, /styles/],
loaders: ['babel'],
include: path.join(__dirname, 'src')
},
{
test: /\.scss$/,
loader: 'style!css!resolve-url!sass?sourceMap'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
}
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/auth.js', 'public/js')
.sass('resources/assets/sass/auth.scss', 'public/css');
mix.js('resources/assets/js/admin-lte.js', 'public/js')
.sass('resources/assets/sass/admin-lte.scss', 'public/css');
mix.autoload({
jquery: [ '$', 'jQuery', 'jquery'],
DataTable: 'datatables.net-bs'
});
mix.extract([
'lodash', 'jquery', 'bootstrap-sass',
'fastclick', 'jquery-slimscroll', 'admin-lte',
'icheck', 'ionicons', 'font-awesome',
'datatables.net', 'datatables.net-bs'
], 'public/js/vendor.js');
mix.version();
I also tried it without the mix.webpackConfig, adding the config this was a desperate attempt to fix the fonts.
Here is my package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"admin-lte": "^2.4.2",
"axios": "^0.17",
"bootstrap": "^4.0.0",
"cross-env": "^5.1.3",
"datatables.net": "^1.10.16",
"fastclick": "^1.0.6",
"font-awesome": "^4.7.0",
"icheck": "^1.0.2",
"ionicons": "^3.0.0",
"jquery": "^3.3.1",
"jquery-slimscroll": "^1.3.8",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"script-loader": "^0.7.2"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"datatables.net-bs": "^1.10.16"
}
}
And in my .scss:
#import '~font-awesome/scss/font-awesome';
Both on Mac and Windows 10

Answer 1

Include Font Awesome into your NPM config
"devDependencies": {
......
......
"font-awesome": "^4.7.0"
}
Run npm update
And then your app.scss include this
// Font Awesome
#import "~font-awesome/scss/font-awesome.scss";
Run npm dev or `npm watch

Answer 2

Getting rid of font-awesome and ionicons from the extract function solves the problem.