Webpack Error on Build: Error: Parse Error

Question

I'm getting the following error when trying to build an HTML page with webpack (no SPA frameworks/libs involved)

- htmlparser.js:244 new HTMLParser
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlparser.js:244:13

- htmlminifier.js:980 minify
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlminifier.js:980:3

- htmlminifier.js:1341 Object.exports.minify
  [htmlapp-webpack]/[html-webpack-plugin]/[html-minifier]/src/htmlminifier.js:1341:16

- index.js:441 HtmlWebpackPlugin.postProcessHtml
  [htmlapp-webpack]/[html-webpack-plugin]/index.js:441:34

- index.js:274 Promise.all.then.then
  [htmlapp-webpack]/[html-webpack-plugin]/index.js:274:25

When running in dev everything works smootly. This happens only when trying to build, this is how I configured the dev and build tasks in package.json:

"scripts": {
    "build": "webpack -p --progress --mode production --config webpack.config.js",
    "start": "npm run dev"
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --open --config webpack.config.js",
}

The errors appear to happen when webpack tries to bundle the images, because I see lot of base64 transformations in the error message

And here is my webpack configuration for images loader:

{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 8192,
          name: "[path][name].[ext]?[hash]",
          fallback: "file-loader"
        }
      },
      {
        loader: "image-webpack-loader",
        options: {
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          pngquant: {
            quality: "65-90",
            speed: 4
          },
          gifsicle: {
            interlaced: false
          },
          svgo: {
            plugins: [
              { removeTitle: true },
              { convertColors: { shorthex: false } },
              { convertPathData: false }
            ]
          },
          webp: {
            quality: 75
          }
        }
      }
    ]
  }

Hope you guys can help me to solve this, I've been searching for a solution for the last two days and still with no success.

UPDATE

This is how the HTML code is written, nothing fancy here

<div class="wrapper">
    <div data-aos="fade-up">
        <img src="./public/img/some-shape.svg" class="img" alt="">
    </div>
    ...
</div>

Maxime R. · Accepted Answer · 2019-08-05 19:09:21Z

2

From what I see on the screenshot, they are no quotes around the base64 data.

You can test the issue online at https://kangax.github.io/html-minifier/

<img src="data:image/png;base64, <base64data>" />

Is correctly minified whereas:

<img src=data:image/png;base64, <base64data> />

Throws an Error: Parse Error: <img src=data:image/png;base64, <base64data> />

answered Aug 5, 2019 at 19:09

Maxime R.

10.1k7 gold badges56 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gabaros Over a year ago

thanks, yes that's the error indeed, however I do not write the base64, the "image-webpack-loader" does it and does it wrong, so the "html-webpack-plugin" is complaining about it. The question is how to avoid the "image-webpack-plugin" to parse the image correctly and place the right base64?

Maxime R. Over a year ago

Okay, could you update your question with the JS code you wrote to import and use the png image ?

gabaros Over a year ago

Done. This is how I place every image whether is svg, png or jpg. Nothing fancy, I have an img folder with all my images in there and I just reference the file. Only HTML, all the JS stuff is done by webpack plugins. Thks.

Collectives™ on Stack Overflow

Webpack Error on Build: Error: Parse Error

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related