TypeError: Cannot read property 'match' of undefined

[waliddoch]

I tried loading images and fonts using file-loader without any success. do i decided to give this package a chance..

This is my webpack.conf.js file:

const path                      = require('path');
const webpack                   = require('webpack');
const UrlLoader                 = require('url-loader');
const BrowserSyncPlugin         = require('browser-sync-webpack-plugin');
const VueLoaderPlugin           = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin   = require('optimize-css-assets-webpack-plugin');

publicFolder                    = path.resolve(__dirname, 'public');
// appFolder                        = path.resolve(__dirname, 'app');

console.log(publicFolder);

module.exports = {

    entry: { 
                // Selects main js file
                main:   './public/es6/index.js'
    },

    output: {
                // Main path for the js folder
                path:       path.resolve(__dirname, 'public/js/'),
                // Select teh name the main js file (after compression)
                filename:   'bundle.js',
                // Public path 
                // publicPath: 'http://localhost:8080',
                publicPath: '/public/js/',
                // publicPath: path.resolve(__dirname, 'public/js/'),
                // Name the chunkFile (in case of external scripts)
                chunkFilename: '[name].[contenthash].js'
    },

    module: {
                rules: [    // Vue Files
                            {
                                test: /\.vue$/,
                                exclude: /node_modules/, 
                                loader: 'vue-loader',
                                options: {
                                            loader: {
                                                scss: 'vue-style-loader!css-loader!sass-loader', 
                                                css: 'vue-style-loader!css-loader'
                                            }
                                }
                            },
                            // JS files
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            },
                            // CSS / SASS files 
                            {
                                // test: /\.scss$/,
                                test: /\.(sa|sc|c)ss$/,
                                use: [
                                        {
                                            loader: MiniCssExtractPlugin.loader,
                                        },
                                        {
                                            loader: 'css-loader',
                                            options: {
                                                        url: false,
                                                        minimize: true,
                                                        sourceMap: true
                                            }
                                        },
                                        {
                                            loader: 'postcss-loader'
                                        },
                                        {
                                            loader: 'css-file-loader', 
                                            options: {
                                                publicPath: '/public/fonts/'
                                            }
                                        },
                                        {
                                            loader: 'sass-loader',
                                            options: {
                                                        sourceMap: true, 
                                                        minimize: true
                                            }
                                        }
                                ]
                            },
                            // Font|SVG: Make Webpack know how and from where to load the files.
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [
                                        {
                                            loader: 'file-loader',
                                            options: {
                                                name:       './public/fonts/[hash].[ext]',
                                                // emitFile:    false,
                                                // useRelativePath: false,
                                                outputPath: './public/fonts/',
                                                publicPath: './public/fonts/'
                                            }
                                         }
                                ]
                            }
                            /*{
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                        fallback: 'file-loader',
                                        // useRelativePath: true,
                                        // outputPath: publicFolder + '/fonts/',
                                        // include: './node_modules/', 
                                        name: '[path][hash].[ext]',
                                        limit: 100000
                                    }
                                }]
                            }*/
                ]
    },
    plugins: [  
                // Load jQuery globally 
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery',
                    'window.jQuery': 'jquery'
                }),

                // Hot module
                // new webpack.HotModuleReplacementPlugin(),

                // BrowserSync: Load page automatically on change
                new BrowserSyncPlugin({
                    proxy: 'https://potato.mywebsite.com/', 
                    port: 3000, 
                    files: [
                        '**/*.php'
                    ], 
                    ghostMode: {
                        clicks: false, 
                        location: false, 
                        forms: false, 
                        scroll: false
                    }, 
                    minify: false,
                    injectChanges: true, 
                    logFileChanges: true, 
                    logLevel: 'debug', 
                    logPrefix: 'webpack', 
                    notify: true, 
                    reloadDelay: 0
                }),

                // Provides a way to customize how progress is reported during a compilation
                new webpack.ProgressPlugin(),

                // Loads Vue
                new VueLoaderPlugin(), 

                // For webpack-dev-server (currently not in use)
                // new webpack.HotModuleReplacementPlugin(), 

                // Handle css in different files (scss file in login.js for example to a hashed login.css file)
                new MiniCssExtractPlugin({ filename: '../css/[name].css' }), 

                // CSS assets during the Webpack build and will optimize \ minimize the CSS
                new OptimizeCSSAssetsPlugin({}),

                // Not sure if needed yet
                new webpack.NamedModulesPlugin()

    ],
    devServer: {
                    // https:       true,
                    headers:        { 'Access-Controll-Allow-Origin': '*' },
                    compress:       true, 
                    quiet:          true, 
                    hot:            true,
                    inline:         true
    }

};

Returns this error on npm run dev:

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--2-1!node_modules/postcss-loader/src/index.js!node_modules/css-file-loader/src/index.js??ref--2-3!node_modules/sass-loader/lib/loader.js??ref--2-4!public/scss/style.scss: Entrypoint mini-css-extract-plugin = * [./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js!./node_modules/css-file-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./public/scss/style.scss] ./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/src!./node_modules/css-file-loader/src??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./public/scss/style.scss 500 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./public/scss/style.scss (./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/src!./node_modules/css-file-loader/src??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./public/scss/style.scss)
Module build failed (from ./node_modules/css-file-loader/src/index.js):
TypeError: Cannot read property 'match' of undefined
    at rule.declarations.forEach.declaration (/www/node_modules/css-file-loader/src/index.js:26:52)
    at Array.forEach (<anonymous>)
    at ast.stylesheet.rules.forEach.rule (/www/node_modules/css-file-loader/src/index.js:25:31)
    at Array.forEach (<anonymous>)
    at Object.module.exports (/www/node_modules/css-file-loader/src/index.js:23:26)

[arshtepe]

@hAtul89 can you provide CSS file or part of it for which it doesn't work