Trying to use Happypack with multiple loaders

[vviikk]

Hello. I'm trying to use Happypack with the following loaders:

new HappyPack({
      id: 'js',
      threads: 4,
      loaders: [
        'ng-annotate',
        'babel',
        'eslint'
      ]
    }),

And I'm calling happypack like so:

{
        test: /\.js$/,
        loaders: 'happypack/loader?id=js',
        exclude: /node_modules/
      },

Unfortunately I'm getting the following error TypeError: r.forEach is not a function:

 Happy[js]: Version: 2.1.0. Using cache? yes. Threads: 4                                                1579ms  Fri Apr 29 13:51:21 2016
Happy[js]: No cache was found, starting fresh.
Happy[js]: All set; signalling webpack to proceed.
/Users/vramanujam/Sites/mast_fe/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
        r.forEach(function(r) {
          ^

TypeError: r.forEach is not a function

[amireh]

You need to use an array if you're using loaders (note the plural form):

{
    test: /\.js$/,
    loaders: [ 'happypack/loader?id=js' ],
    exclude: /node_modules/
},

[vinnymac]

Interesting, I had the same problem and found the solution here. In your README.md you specify a single jsx loader, but you use the word loaders. I copied this example in order to test, perhaps that is what happened to the OP.

[amireh]

So, webpack 1.x accepts loaders in two forms and two variants:

// form 1: a single loader with an "object" query:
{
  loader: 'my-single-loader',
  query: { "foo": "bar" } // this is optional
}

// form 1, variant 2: a single loader with inline query:
{
  loader: 'my-single-loader?foo=bar',
  query: {} // this is optional
}

// form 2: multiple loaders, inline queries:
{
  loaders: [ 'a', 'b?foo=bar' ]
}

HappyPack only accepts loaders as an Array. But it lets you either use strings with inline queries (like form 1 variant 2 above) or an object with path: String and query: String, somewhat similar to Webpack 2, but Webpack 2 allows you to use objects for query which we can easily support if needed.

I should probably do that last bit to relieve some of this confusion.

[amireh]

The README was amended to now only use loaders (plural) everywhere. Is there anything else for this ticket?