Critical error

[lrmpsm53]

• OS: Fedora 32 Workstation
• NodeJS: 14.7
• Webpack: 4.44.1

Hello. In the course of my experiments I encountered a very interesting error.

I wanted to combine pug (jade) with css modules. To do this, I configured webpack as follows.

//webpack.dev.ts
import * as path from 'path';
import HTMLWebpackPlugin from 'html-webpack-plugin';
import * as webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import siteConfig from './site.config';

const config: webpack.Configuration = {
    context: path.resolve(__dirname, './dev'),
    entry: './index.ts',
    output: {
        filename: './index.js',
        path: path.resolve(__dirname, './build')
    },
    devServer: {
        hot: true,
        watchContentBase: true
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.pug',
            filename: './index.html',
            inject: 'head',
            scriptLoading: 'defer',
            showErrors: true,
            ...siteConfig
        }),
        new MiniCssExtractPlugin({
            filename: 'index.css',
        })
    ],
    mode: 'development',
    target: 'web',
    devtool: 'eval',
    cache: {
        type: 'filesystem'
    },
    module: {
        rules: [
            {
                test: /\.(sass|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[path][name]__[local]'
                            }
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('node-sass'),
                            sourceMap: true
                        }
                    },
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg|ttf|otf)$/i,
                loader: 'file-loader',
                options: {
                    name: './assets/[name].[ext]'
                }
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader'
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
        ]
    }
}

export default config;

Compilation on the development server is successful. But after subtracting the line below into the index.pug file, a critical error is thrown.

- const s = require('./index.sass');

If the line "MiniCssExtractPlugin.loader" is removed from webpack.dev.ts, then the compilation is successful.

The error looks something like this:

{some path}/node_modules/neo-async/async.js:16 throw new Error('Callback was already called.'); ^ Error: Callback was already called. at throwError ({some path}/node_modules/neo-async/async.js:16:11) at {some path}/node_modules/neo-async/async.js:2818:7 at processTicksAndRejections (internal/process/task_queues.js:75:11)

[lrmpsm53]

Is there a solution to this problem?

[alexander-akait]

Update deps to latest and please the issue template in future