How do I use babel's `useBuiltIns: 'usage'` option on the vendors bundle?
Babel by default assumes that files it processes are ES modules (using import
and export
). If you are running Babel on things in node_modules
(which are likely CommonJS modules), you'll need to either tell Babel to process all node_modules
as scripts, or tell Babel to guess the type based on the presence of import
and export
. Guessing is easiest, so you can add
sourceType: "unambiguous"
and also tell Babel not to run the usage
transform on core-js
itself with
ignore: [
/\/core-js/,
],
because otherwise the usage
transform will actually be inserting references to core-js
into itself causing dependency cycles.
So in your top-level Babel configuration, you'd do e.g.
{
ignore: [
/\/core-js/,
],
sourceType: "unambiguous",
presets: [
['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],
}
If you wanted to be extra specific about it, you could also do
{
ignore: [
/\/core-js/,
],
presets: [
['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],
overrides: [{
test: "./node_modules",
sourceType: "unambiguous",
}],
}
to only set the flag for files inside node_modules
, but there is likely not much to gain by doing that.
As for why this fixes that error, the issue is that, if Babel thinks something is an ES module, it will insert import
statements. If you insert import
statements into a file that also uses CommonJS things like module.exports
, it means the file would now be using both module systems in the same file, which is a big issue and causes the errors you are seeing.
Pontiacks
Updated on June 08, 2022Comments
-
Pontiacks about 2 years
Since I need to support also IE11, I need to transpile also
node_modules
.This is the babel config I use on the node_modules:
presets: [ ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }], ],
I use the
useBuiltIns
options because it was giving an errorSymbol is not defined
, the polyfill was needed.However this configuration breaks at compile time, supposedly because it injects some
imports
in the code, here is the error:Basically it's not liking the
module.exports
. So how do I useuseBuiltIns
in the vendors bundle?For now I solved by always requiring the babel polyfill in the
index.html
, however this is not ideal. -
Pontiacks almost 6 yearsTried this, this error came up: i.imgur.com/slZtKT5.png which is a progress because it's a different error!
-
Pontiacks almost 6 yearsby the way, it should be noted that in this case I am passing the babel config as options to the babel-loader
-
loganfsmyth almost 6 years@Pontiacks I've added another
excludes
to the config, if you want to give that a shot. -
fabb over 5 years
/@babel\b/
should also be excluded, at least whentransform-runtime
is used -
VimNing about 2 yearsWhat are the drawbacks of setting
sourceType: "unambiguous"
? Or I just brainlessly always use it against vendor bundles? -
VimNing about 2 yearsHow to integrate
@babel/plugin-transform-runtime
with@babel/preset-env
?