How to resolve the Webpack 2 loaderUtils.parseQuery() Warning?

Question

When I compiled my files by using Webpack2. It showed the following warning:

"loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56"

I checked the github page and did not find out how to resolve this problem. This is my config:

// webpack 2 configuration
// https://webpack.js.org/guides/migrating/

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    watch: true,
  inline: true,
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, './app'),
    ],
    //http://webpack.github.io/docs/configuration.html#resolve-alias
    alias: {
      lib: path.resolve('./lib'),
      res: path.resolve('./res'),
      style: path.resolve('./style'),
      //make sure it can be load by 'jquery'
      jquery$: 'jquery',
      // 01/26/2017 http://isotope.metafizzy.co/extras.html#webpack
      masonry: 'masonry-layout',
      isotope: 'isotope-layout'
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
  },
  devtool: 'source-map', 
  target: 'web', // enum

    entry: {
    // entry points
    app: path.resolve('./app') + '/' + 'main.js',
    //for basic stable library only
    vendor: ['babel-polyfill', 'jquery', 'lodash', 'react', 'react-dom', 'bootstrap-sass', path.resolve('./app') + '/' + 'vendor.js'],
  },
  output: {path: path.resolve('./script'), publicPath:'script/', filename: '[name].js', /*chunkFilename: '[id].js'*/},
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        // test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        // loader: 'file'
        // https://github.com/webpack/webpack/issues/597
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
      },
      // NOTICE: png / jpg needs specific loaders, see https://github.com/webpack-contrib/css-loader
      {
        test: /\.png$/,
        loader: 'url-loader', 
        options: {limit: 100000},
      },
      {
        test: /\.jpg$/,
        loader:'file-loader'
      },
      {
        test: /\.s?css$/,
        // https://css-tricks.com/css-modules-part-2-getting-started/
        // css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!sass-loader',
        })
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({name:'vendor', filename:'vendor.js'}),
    //export to global for bootstrap and etc. (needs jquery ^2.0)
    new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'}),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      }
    }),
    // http://webpack.github.io/docs/stylesheets.html
    // https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
    new ExtractTextPlugin({filename: '[name].css'}),
    new webpack.LoaderOptionsPlugin({
      debug: true,
      // test: /\.xxx$/, // may apply this only for some modules
      options: {
        // for @import path in the style file
        sassLoader: {includePaths: [path.resolve('./style') + '/']}
      }
    }),
  ]
};

Any thoughts will be appreciated.

Answer 1

loaderUtils.parseQuery() is used by loaders to get the options that are passed to the loader. It has been replaced with loaderUtils.getOptions(). You are probably using a loader that still uses parseQuery. All the loaders you're using in you webpack config should have changed to use getOptions, but you might be using an older version of them which doesn't include the change. To fix it you can simply upgrade your loaders to the latest version.

If for some reason you don't want to upgrade all loaders, you can add the following line inside the webpack config file (not as an option):

process.traceDeprecation = true;

This will give you a stack trace where parseQuery is used, so you can identify the loader that actually uses it and upgrade that particular one.

---

It turns out that the latest babel-loader still uses parseQuery, it will be changed in the next major version and it's already available in v7.0.0-alpha. But if you don't want to use the alpha version you'll have to live with the warning until v7.0.0 comes out.