AssertionError: HappyPack: plugin for the loader '1' could not be found! Did you forget to add it to the plugin list?

[cheer555]

I use webpack 2.6.1 + create-react-app+ happypack, and throw AssertionError: HappyPack: plugin for the loader '1' could not be found! Did you forget to add it to the plugin list?

1. my webapck config
   
   

[nudoru]

Have the same issue. Looks like it doesn't work when you pass an id to the loader. This limits you to one Happypack loader at a time since you have no way to reference other.

This is a custom app, not one created w/ create-react-app

[amireh]

Defining options is overriding the query that is specified in the loader string. Those options to babel need to be specified in the plugin's loader list, not in webpack's.

module: { rules: [{
  test: ...,
  // here you configure happypack; pass it the id
  loader: 'happypack/loader?id=happybabel',
}] },
...
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: [{
      loader: 'babel-loader',
      // here you configure babel:
      options: { babelrc: true, cacheDirectory: true }
    }]
  })
]

That should fix it. Feel free to re-open if you're still having problems!

[RickyLL]

Defining options is overriding the query that is specified in the loader string. Those options to babel need to be specified in the plugin's loader list, not in webpack's.

module: { rules: [{
  test: ...,
  // here you configure happypack; pass it the id
  loader: 'happypack/loader?id=happybabel',
}] },
...
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: [{
      loader: 'babel-loader',
      // here you configure babel:
      options: { babelrc: true, cacheDirectory: true }
    }]
  })
]

That should fix it. Feel free to re-open if you're still having problems!

Now，It still has this problem.

[bernatfortet]

Any updates on this one?

[amireh]

I see the 😕 reactions on the response above. Let me try to explain it differently: a webpack loader can accept options as a string in the form of query:

loader: 'babel-loader?opt_one=a&opt_two=b'

But it can also accept options in a hash if you define the options property:

loader: {
  loader: 'babel-loader',
  options: { opt_one: 'a', opt_two: 'b' }
}

Defining both at the same time does not merge the options. It's either one or the other. In the original snippet, the loader happypack/loader was being passed a string-encoded set of options( ?id=happybabel) but then that same loader also had an options map which was meant for the underlying babel loader.

What I meant in my response is to move that options map to the loader definition inside HappyPlugin so that happypack itself passes those options to Babel. Remember that with the HappyPack setup, webpack no longer sees babel-loader directly, only happypack/loader.

So, this part of the snippet configures Webpack to use HappyPack's loader:

module: { rules: [{
  test: ...,
  // here you configure happypack; pass it the id
  loader: 'happypack/loader?id=happybabel',
}] }

Whereas this part of the snippet configures HappyPack to use Babel loader:

plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: [{
      loader: 'babel-loader',
      // here you configure babel:
      options: { babelrc: true, cacheDirectory: true }
    }]
  })
]

I hope that made it clear.

[guopingping]

it's no use, still has this problem.