html-webpack-plugins and loader-utils

[Gourdbaby]

webpack bundle an error

Module build failed: Error: A valid query string passed to parseQuery should begin with '?'

who can tell me why???

[mastilver]

Please publish your whole webpack.config.js

[til-schneider]

I have the same problem.

Here is my stripped-down webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        script: [ './src/js/index.js' ]
    },
    output: {
        path:     path.resolve(__dirname, 'dist'),
        filename: 'page/[hash].js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
};

And the versions of my dependencies (all newest versions):

  "devDependencies": {
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.1.0"
  },

[til-schneider]

This seems to be a bug in the newest version 1.1.0 of loader-utils.

Here's the issue: https://github.com/webpack/loader-utils/issues/83

As a workaround I installed the previous version and everything worked:

npm install --save-dev [email protected]

[mastilver]

Maybe it's caused by html-webpack-plugin using an older version of loader-utils (0.2.17)

npm ls loader-utils    
[email protected] /Users/thomas/xdev/genesis
├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └── [email protected]  deduped
├─┬ [email protected]
│ └── [email protected]  deduped
├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └── [email protected]  deduped
└─┬ [email protected]
  └── [email protected]  deduped

npm ls webpack
[email protected] /Users/thomas/xdev/genesis
└── [email protected] 

npm ls html-webpack-plugin
[email protected] /Users/thomas/xdev/genesis
└── [email protected] 

I can't reproduce it on my local though :(

[til-schneider]

Very strange: I can't reproduce the problem any more, too...

I tried running the stripped-down version (the one I posted above) in a new project and it worked. I used an empty src/js/index.js and npm install --save-dev webpack html-webpack-plugin.

Then I tried to reproduce the problem in my original project. I deleted the entry "loader-utils": "^1.0.4" from my package.json (which is the workaround I posted above), deleted package-lock.json and node_modules and installed everything from scratch using npm install. And this time it worked, too.

Maybe it has something to do with the order in which you install your dependencies.

So I collected all npm install commands, I used for my project. Here they are:

npm install --save-dev webpack
npm install --save-dev html-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@beta css-loader style-loader less-loader less
npm install --save bootstrap
npm install --save-dev url-loader file-loader

[mastilver]

So I collected all npm install commands, I used for my project. Here they are:

So when you run those, it's failing?

I hate those kind of unreproducible issues :D

[til-schneider]

I ran all the npm install commands in my stripped-down project and tried to build between every npm install. And it worked all the time...

I'm confused...

[Uunie]

who can tell me why?
This method is useless.
npm install --save-dev [email protected]

[mastilver]

I don't think npm install --save-dev [email protected] would work because html-webpack-plugin still depends on [email protected]

PR welcome to bump that dependencies

[selim13]

For those, who are facing this error: check your package-lock.json

"html-webpack-plugin": {
      "version": "2.29.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
      "integrity": "sha1-6Yf0IYU9O2k4yMTIFxhC5f0XryM=",
      "dev": true,
      "requires": {
        "bluebird": "3.5.0",
        "html-minifier": "3.5.2",
        "loader-utils": "1.1.0",
        "lodash": "4.17.4",
        "pretty-error": "2.1.1",
        "toposort": "1.0.3"
      }
    },

here loader-utils 1.1.0 is used instead of 0.2.17.
After deleting package-lock.json and running npm i:

"html-webpack-plugin": {
      "version": "2.29.0",
      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
      "integrity": "sha1-6Yf0IYU9O2k4yMTIFxhC5f0XryM=",
      "dev": true,
      "requires": {
        "bluebird": "3.5.0",
        "html-minifier": "3.5.2",
        "loader-utils": "0.2.17",
        "lodash": "4.17.4",
        "pretty-error": "2.1.1",
        "toposort": "1.0.3"
      },
      "dependencies": {
        "loader-utils": {
          "version": "0.2.17",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
          "dev": true,
          "requires": {
            "big.js": "3.1.3",
            "emojis-list": "2.1.0",
            "json5": "0.5.1",
            "object-assign": "4.1.1"
          }
        }
      }
    },

This "fixes" the error above for me.

[fishinallblue]

问题与上面一致，解决办法
npm install --save-dev [email protected]

[QhdSuperMan]

i want use vue-svg-icon
error is loaderUtils.parseQuery is not a function
why ? who can help me.

[chenyiqi]

The above methods, can't solve this problem

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.