javascript - Extract-loader ERROR: The module created for a LoaderDependency must have an original source

Question

I am trying to load a .hbs file using a html loader with a preprocessor, extract loader and a file loader. The important part of my webpack.config.js looks like this:

module.exports = {
   ...
    module: {
        rules: [

            {
                test: /.hbs$/i,
                use: [
                    "file-loader?name=[name].[ext]",
                    "extract-loader",
                    {
                        loader: 'html-loader',
                        options: {
                            preprocessor: content => Handlebars.compile(content)(values),
                        }
                    }
                ],
            }
        ],
    }
 ...
};

I also have a style loader and an image loader setup, but they don't seem to be the issue (viz later on). When I run webpack I get the following error

The module created for a LoaderDependency must have an original source

The error trace (below) doesn't point to it, but when I remove extract-loader, everything works, but I get a file with a janky name with the prefinal step (I can show it on pastebin, it's just the code that webpack needs to execute to get the html, which is what extract-loader is for). I cannot figure out what I'm doing wrong. Package.json is below and I can show you my whole code if necessary. The weirdest thing to me is that I seem to be the only person ever getting this error, there are no threads or reports anywhere.

If I don't get this to work I'd be very happy for an alternative which will allow me to use webpack to compile hbs to html and then load all images and assets from it, I assumed this was the way to do it.

Complete error:

Error: The module created for a LoaderDependency must have an original source
    at C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79:16
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1556:8
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:281:5
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:254:21)
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:237:11
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1263:15
    at C:scriptselementelementWeb
ode_moduleswebpacklibHookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.store (C:scriptselementelementWeb
ode_moduleswebpacklibCache.js:107:20)
Error: The module created for a LoaderDependency must have an original source
    at C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79:16
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1556:8
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:281:5
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:254:21)
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:237:11
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1263:15
    at C:scriptselementelementWeb
ode_moduleswebpacklibHookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.store (C:scriptselementelementWeb
ode_moduleswebpacklibCache.js:107:20)
C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79
                                                                        throw new Error(
                                                                        ^
Error: The module created for a LoaderDependency must have an original source
    at C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79:16
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1556:8
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:281:5
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:254:21)
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:237:11
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1263:15
    at C:scriptselementelementWeb
ode_moduleswebpacklibHookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.store (C:scriptselementelementWeb
ode_moduleswebpacklibCache.js:107:20)
PS C:scriptselementelementWeb> webpack --config webpack.config.js --mode=production
(node:10580) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'snapshot' of 'this.buildInfo' as it is undefined.
    at NormalModule.addCacheDependencies (C:scriptselementelementWeb
ode_moduleswebpacklibNormalModule.js:1089:11)
    at Compilation.summarizeDependencies (C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:2862:11)
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:2217:15
    at eval (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:17:1)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:10580) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
(node:10580) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79
                                                                        throw new Error(
                                                                        ^

Error: The module created for a LoaderDependency must have an original source
    at C:scriptselementelementWeb
ode_moduleswebpacklibdependenciesLoaderPlugin.js:79:16
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1556:8
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:281:5
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._handleResult (C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:254:21)
    at C:scriptselementelementWeb
ode_moduleswebpacklibutilAsyncQueue.js:237:11
    at C:scriptselementelementWeb
ode_moduleswebpacklibCompilation.js:1263:15
    at C:scriptselementelementWeb
ode_moduleswebpacklibHookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (C:scriptselementelementWeb
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.store (C:scriptselementelementWeb
ode_moduleswebpacklibCache.js:107:20)

package.json:

{
  "name": "elementweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.1",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "handlebars": "^4.7.6",
    "handlebars-webpack-plugin": "^2.2.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.18.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-sources": "^2.2.0"
  },
  "dependencies": {
    "image-loader": "0.0.1"
  }
}

webpack.config.js

const HandlebarsPlugin = require('handlebars-webpack-plugin');
const path = require('path');
const Handlebars = require('handlebars');
const values = require(path.resolve(__dirname, 'data.js'));

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,

    },
    plugins: [
    ],
    module: {
        rules: [

            {
                test: /.hbs$/i,
                use: [
                    "file-loader?name=[name].[ext]",
                    "extract-loader",
                    {
                        loader: 'html-loader',
                        options: {
                            preprocessor: content => Handlebars.compile(content)(values),
                        }
                    }
                ],
            },
            {
                test: /.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
            // {
            //     test: /.(png|jpe?g)$/i,
            //     use: [
            //         "file-loader",
            //         "image-loader"
            //     ]
            // },
            {
                test: /.svg$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            generator: (content) => svgToMiniDataURI(content.toString()),
                        },
                    },
                ],
            }
        ],
    }
};

question from:https://stackoverflow.com/questions/65945684/extract-loader-error-the-module-created-for-a-loaderdependency-must-have-an-ori

Answer 1

Waitting for answers