Update to 2.1.0-beta.25 causes parseQuery should get a string as first argument

[wlingke]

I'm submitting a bug report

Webpack version:
2.x

Please tell us about your environment:
Windows 10

Current behavior:
I recently upgraded to webpack 2 beta 25 from beta 20. In beta 20, my entire configuration worked and the compilation worked. Upgrading to webpack 25 causes this error:

I'm running the compiler script using babel-node.

import webpack from 'webpack';
import _debug from 'debug';

const debug = _debug('build:webpack-compiler');
const DEFAULT_STATS_FORMAT = {
  chunks: false,
  chunkModules: false,
  colors: true,
};

export default function webpackCompiler(webpackConfig, statsFormat = DEFAULT_STATS_FORMAT) {
  return new Promise((resolve, reject) => {
    const compiler = webpack(webpackConfig);

    /* eslint-disable consistent-return */
    compiler.run((err, stats) => {
      if (err) {
        debug('Webpack compiler encountered a fatal error.', err);
        return reject(err);
      }

      const jsonStats = stats.toJson();
      debug('Webpack compile completed.');
      debug(stats.toString(statsFormat));

      if (jsonStats.errors.length > 0) {
        debug('Webpack compiler encountered errors.');
        debug(jsonStats.errors.join('\n'));
        return reject(new Error('Webpack compiler encountered errors'));
      } else if (jsonStats.warnings.length > 0) {
        debug('Webpack compiler encountered warnings.');
        debug(jsonStats.warnings.join('\n'));
      } else {
        debug('No errors or warnings encountered.');
      }
      resolve(jsonStats);
    });
  });
}

• Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart | ...]
  ES6/7

[stevewillard]

Instead of loaders and query in your webpack config, you need to update them to the new rules and options:

https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#moduleloaders-is-now-modulerules

[gkostyanikov]

Having hard times debugging this and still no luck.

webpack 2.1.0-beta.25
osx el captain

my config:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var rootAssetPath = './public/assets';

module.exports = {

  entry: { 
    bundle: [ 'babel-polyfill', 'tether', __dirname + "/app/scripts/app.js" ],
    //trick: [ __dirname + "/app/scripts/Trick.js" ],
    //hit: [ __dirname + "/app/scripts/Hit.js" ]
    //test: [ __dirname + "/app/scripts/test.js" ]
  },

  output: {
    path: path.join(__dirname, 'public', 'assets'),
    filename: '[name].js'
  },

  module: {

    noParse: [
      path.resolve(__dirname, "public"),
      path.resolve(__dirname, "data"),
      path.resolve(__dirname, "data-raw"),
      path.resolve(__dirname, "vendor"),
    ],

    rules: [

      {
        test: /\.$|\.js$|\.jsx$|\.es6$/,
        include: [
          path.resolve(__dirname, "app/scripts"),
          path.resolve(__dirname, "app/vendor")
        ],
        exclude: /node_modules/,
        loader: 'babel',
        options: {
          presets: [
            ['es2015', { modules: false }],
            'react',
            'stage-0',
          ]
        }
      },

      {
        test: /\.css$/,
        use: [
          { loader: 'style' },
          { loader: 'css' },
          { loader: 'postcss' },
        ]
      },

      {
        test: /\.scss$/,
        use: [
          { loader: 'style' },
          { loader: 'css' },
          { loader: 'postcss' },
          { loader: 'sass' },
        ],
        include: [
          path.resolve(__dirname, "app/styles"),
          path.resolve(__dirname, "app/vendor")
        ]
      },

      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'url',
        options: {
          limit: '100000',
          name: '[name].[ext]'
        }
      }

    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      "window.Tether": "tether",
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.NoErrorsPlugin(),
    new ManifestRevisionPlugin('./manifest.json', {
      rootAssetPath: rootAssetPath,
      ignorePaths: ['/styles', '/scripts', '/images', '.DS_Store']
    }),
    new CopyWebpackPlugin([
      { from: './app/images' }
    ]),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [ require('autoprefixer')]
      }
    })
  ]
}

I guess something with loader options section because when i've removed

        options: {
          presets: [
            ['es2015', { modules: false }],
            'react',
            'stage-0',
          ]
        }

and moved babel configuration to .babelrc webpack stopped to show errors with this loader and started to show up errors with next loader which has options section (url loader).

[stevewillard]

In your rule config try using use instead of loader or loaders

It looks like you missed that change for your url-loader and your babel-loader

[gkostyanikov]

Unfortunately i've tried more verbose syntax with use's everywhere without success just before the more compact version posted above. I've only omitted use section where only one loader in chain(babel, url) following this example http://webpack.js.org/configuration/. Here is the rewritten version with use's that throws the same error:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var rootAssetPath = './public/assets';

module.exports = {

  entry: { 
    bundle: [ 'babel-polyfill', 'tether', __dirname + "/app/scripts/app.js" ],
    //trick: [ __dirname + "/app/scripts/Trick.js" ],
    //hit: [ __dirname + "/app/scripts/Hit.js" ]
    //test: [ __dirname + "/app/scripts/test.js" ]
  },

  output: {
    path: path.join(__dirname, 'public', 'assets'),
    filename: '[name].js'
  },

  module: {

    noParse: [
      path.resolve(__dirname, "public"),
      path.resolve(__dirname, "data"),
      path.resolve(__dirname, "data-raw"),
      path.resolve(__dirname, "vendor"),
    ],

    rules: [

      {
        test: /\.$|\.js$|\.jsx$|\.es6$/,
        include: [
          path.resolve(__dirname, "app/scripts"),
          path.resolve(__dirname, "app/vendor")
        ],
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel',
            options: {
              presets: [
                ['es2015', { modules: false }],
                'react',
                'stage-0',
              ]
            }
          }
        ]
      },

      {
        test: /\.css$/,
        use: [
          { loader: 'style' },
          { loader: 'css' },
          { loader: 'postcss' },
        ]
      },

      {
        test: /\.scss$/,
        use: [
          { loader: 'style' },
          { loader: 'css' },
          { loader: 'postcss' },
          { loader: 'sass' },
        ],
        include: [
          path.resolve(__dirname, "app/styles"),
          path.resolve(__dirname, "app/vendor")
        ]
      },

      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        use: [
          {
            loader: 'url',
            options: {
              limit: '100000',
              name: '[name].[ext]'
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      "window.Tether": "tether",
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.NoErrorsPlugin(),
    new ManifestRevisionPlugin('./manifest.json', {
      rootAssetPath: rootAssetPath,
      ignorePaths: ['/styles', '/scripts', '/images', '.DS_Store']
    }),
    new CopyWebpackPlugin([
      { from: './app/images' }
    ]),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [ require('autoprefixer')]
      }
    })
  ]
}

[alexichepura]

There is old loader-utils in webpack's package.json "loader-utils": "^0.2.11"
But only latest 0.2.16 is now compatible with webpack 2. For some reason it didn't updated.
Short fix:
npm i loader-utils

[lukeapage]

Thanks @achicu I got the same problem and was trying to work it out as your message came through. That fixes it for me.

[gkostyanikov]

@AlexChepura thanks, finally it works!)