Webpack: Loading index.html - Module build failed, Unknown: Unexpected token (3:61) (import.meta.url)

Question

I am learning webpack js; following an example where the trainer loads an html page from src folder to a destination (dist) folder. I am trying the same thing but on Webpack5. I have created a config folder and running the below webpack.dev.js from config folder.

Webpack.dv.js

const path = require("path");
module.exports = {
    entry: {
        main: ["./src/main.js"]
    },
    mode: "development",
    output: {
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "/"
    },
    devServer: {
        contentBase: "dist",
        overlay: true
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.html$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].html"
                        }
                    },
                    {
                        loader: "extract-loader"
                    },
                    {
                        loader: "html-loader",
                    }
                ]
            }
        ]
    }
};

Upon yarn serve --config=config/webpack.dev.js command, I get the following error,

./src/index.html 39 bytes [built] [code generated] [1 error]

ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:61)
  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("./main-bundle.js", import.meta.url);
    |                                                              ^
  4 | // Module
  5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
  6 | var code = "<!DOCTYPE html>\n<html>\n    <head>\n        <title>Testing Webpack with Yarn!</title>\n    </head>\n    <body>\n        <div class=\"profile\">\n            <h1>Hello World!</h1>\n        </div>\n        <script src=\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\"></script>\n    </body>\n</html>";
    at Parser.pp$5.raise (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp$3.parseExprAtom (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3627:50)
    at Parser.pp$3.parseExprSubscripts (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3494:19)

So I played around with the Script tag in the HTML file (given below),

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Webpack with Yarn!</title>
    </head>
    <body>
        <div class="profile">
            <h1>Hello World!</h1>
        </div>
        <script src="main-bundle.js"></script>
    </body>
</html>

Turns out if I remove the <script> tag, the project builds fine but nothing is copied over to dist folder. Can someone please point out as to what is wrong with the above configurations? What am I missing or what can I do to make this work? Also please point out why is it a good or bad idea to load an index.html from a src?

package.json:

{
  "name": "name-this-anything",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve --config=config/webpack.dev.js"
  },
  "devDependencies": {
    "css-loader": "^5.2.5",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-middleware": "^4.3.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Thanks!

This seems to be an issue already check here https://github.com/webpack-contrib/html-loader/issues/385 and here https://github.com/peerigon/extract-loader/issues/107. As suggested use https://github.com/webpack-contrib/mini-css-extract-plugin with https://github.com/jantimon/html-webpack-plugin — Dolly, May 24 '21 at 17:04
After adding it, getting the following error, `modules by path ./src/ 1.19 KiB modules by path ./src/*.css 910 bytes ./src/main.css 325 bytes [built] [code generated] ./node_modules/css-loader/dist/cjs.js!./src/main.css 585 bytes [built] [code generated] ./src/main.js 252 bytes [built] [code generated] ./src/index.html 54 bytes [built] [code generated] ERROR in Conflict: Multiple assets emit different content to the same filename index.html` — Ahmed, May 24 '21 at 17:07
Check https://stackoverflow.com/questions/42148632/conflict-multiple-assets-emit-to-the-same-filename — Dolly, May 24 '21 at 17:33

Webpack: Loading index.html - Module build failed, Unknown: Unexpected token (3:61) (import.meta.url)

0 Answers0