Exporting the HTML into their own html file with html-loader and extract-loader

Question

I am trying to convert the html file that would contain absolute paths in src. I found a similar problem in the webpack documentation. I try to use html-loader with extract-loader but gets an error.

1. html file -> simple.html

2. index js file :

   import plik from './simple.html'
   

3. webpack.config.js -> [https://webpack.js.org/loaders/html-loader/#export-into-html-files][1]

4. Module version ->

   "file-loader": "^6.2.0",
   "extract-loader": "^5.1.0",
   "html-loader": "^2.1.2",
   "webpack-cli": "^4.6.0",
   "webpack": "^5.28.0"
   

ERROR:

Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:88)
  1 | // Imports
  2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../../node_modules/html-loader/dist/runtime/getUrl.js";
 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./assets/img/xxxxyyyyzzzzz.png", import.meta.url);

 Webpack can resolve **import.meta.url**

Someone has similar problem ??

Answer 1

It appears that the issue is that extract-loader is not maintained and that this is a bug with that loader.

Allegedly, there is a solution, though it only generated a new issue for me:

Disable esModules in the options for the html-loader that runs before extract-loader. In other words, if your config currently looks like this:

const config = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    "extract-loader",
                    "html-loader",
                ]
            },
            ...
        ],
        ...
    },
    ...
}

Make it look like this:

const config = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    "extract-loader",
                    {
                        loader: "html-loader",
                        options: {
                            esModule: false,
                        },
                    },
                ],
            },
            ...
        ],
        ...
    },
    ...
}

This apparently has to do with extract-loader transforming modules with babel-preset-env, which is deprecated in favor of @babel/preset-env and doesn't recognize some of the newer syntax features (like ES modules).