I am eager to create a versatile UI component library and bundle it with Webpack. However, I encountered an issue when trying to import it into another project that has useBuiltIns: 'usage' specified in the babelrc file. The import fails with the following error message:
"export 'default' (imported as 'Component') was not found in 'component'
This snippet showcases a portion of my webpack configuration in the library project:
output: {
path: path.resolve(process.cwd(), './dist'),
filename: 'component.js',
chunkFilename: '[id].js',
library: 'Component',
libraryTarget: 'commonjs2',
libraryExport: 'default'
},
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
The Babel configuration in the library project looks like this:
module.exports = {
presets: [
[
"env",
{
modules: false,
targets: {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
"stage-2"
]
}
On the other hand, the consuming project's Babel configuration is set as follows:
module.exports = {
presets: [
'@vue/app'
]
}
The issue is likely due to the implicit presence of useBuiltIns: 'usage'. While one solution would be to disable useBuiltIns or use scriptType: 'unambiguous' in the consuming project, this is not ideal for me. My aim is to offer a flexible library that can be used across various projects without imposing specific configurations on them.
Is there something crucial that I am overlooking in this scenario?