Closed cheer555 closed 7 years ago
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
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!
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.
Any updates on this one?
I see the :confused: 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.
it's no use, still has this problem.
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?