I've discovered that for some reason, webpack favors module instead of main on package.json.
We have a lot of libraries that export module in ES6 and main transpiled but we end up having stuff not being transpiled then. Taking a couple of famous React modules such as React Bootstrap or React Toolbox
I can see that I'm not going against convention here yet I'm surprised not many people run into this. React needs to run both on the browser and node if SSR is in place so I'm not sure how to proceed here.
Example library here: https://github.com/firstandthird/domodule/blob/master/package.json#L6
Both including node_modules on babel loader and doing the switch indicated on the above solution seem to go against every other thing which, again, surprises me.
Only partial solution I've found is to not exclude node_modules on babel-loader but that seems like it might bite me back.
Here's the relevant portion of Webpack's config.
module.exports = config => ({
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
configFile: false,
presets: [
[
'@babel/preset-env',
{
targets: config.browserlist,
useBuiltIns: false,
modules: false,
exclude: ['transform-typeof-symbol']
}
]
],
cacheDirectory: true,
cacheCompression: config.minify,
compact: config.minify
}
}
});
Question is, what's the proper way to either configure Webpack or my libraries. I don't mind changing all the libraries as long as it's a known standard or something that we could be missing here.
from Webpack with module and main transpilation
No comments:
Post a Comment