NPM/Webpack can't find dependencies (Windows 10)

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.

I'm using Windows 10 (Laragon for that matter).

WKrooshof

8 years ago

Level 1

Yes, 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.