Develop Reference

How to transpile an npm dependency to es5 with babel and webpack?

I have to make our website compatible for internet explorer, and it’s quite tricky, as the browser doesn’t understand es6 (arrow functions and the like). I’ve been trying to upgrade webpack and tweak the webpack and babel config to fit our needs. This works great for our own source files, but doesn’t in the node_modules folder. The syntax is not IE compatible if we don’t include it in our babel transpiling, but it also fails if we do transpile the specific node_modules folder that fails (a dependency within the webpack-hot-middleware dependency), giving an error of Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead. I’m hoping I just have the wrong babel or webpack settings here, but I've been scraping the interwebz for answers for a while but haven't quite found the solution yet.
I'm using webpack 5 and babel-loader. I have a .babelrc and a webpack.config.js file, here is a snippet from the latter while I try to transpile the failing node_module package:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [
{
and: [/node_modules/],
not: [
path.resolve(
__dirname,
"node_modules/webpack-hot-middleware/node_modules/ansi-regex"
)
]
}
],
options: {
babelrc: false,
presets: [
"#babel/preset-react",
["#babel/preset-env", {
"corejs": { "version": 3 },
"useBuiltIns": "usage",
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"ie": "10"
},
}]],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-transform-arrow-functions"
]
}
},
[...]
]
}

How can I use Node.js CommonJS modules in ES6 import/export modules using babel or webpack?

I'm sorry if this is a duplicate (I looked hard using the search tool but nothing came close). Anyone has any ideas how to transpile Node.js CommonJS modules so they can be used within an ES6 import/export project?
I know there's #babel/plugin-transform-modules-commonjs which transpiles ES6 modules into CommonJS form, but I think I'm in need of the opposite. The reason I need this is I have a config file written using Node's module.exports syntax that needs to be imported within a React project built with babel using ES6 modules, but I get a Uncaught TypeError: Cannot assign to read only property 'exports' of object error. Any ideas would be greatly appreciated.
Here's my babelrc.js file:
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
['#babel/plugin-proposal-class-properties', { loose: true }],
['#babel/plugin-transform-runtime', { regenerator: true }],
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-optional-chaining'
],
env: {
production: {
plugins: [
[
"transform-react-remove-prop-types",
{ removeImport: true }
],
]
}
}
}
And my webpack config babel loader rule:
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false,
envName: isModeProduction ? 'production' : 'development'
}
}
]
},

Thanks to #Thomas Sablik's comment, I found out this was a known webpack issue.
And after poking round and looking up this error, I found this answer on another Stack Overflow which helped me fix it by adding "sourceType": "unambiguous" to my babel configuration.
https://stackoverflow.com/a/56283408/2942765
Thank you Thomas.

Including webpack helper methods and polyfills only in main bundle

I'm using webpack to bundle React but I still need to transpile our legacy code base written in plain javascript. I've gotten it to work so far but I noticed that since webpack treats every javascript file as an individual bundle it is also injecting its helper methods and polyfills in every file. It would be best if those were only included in the main javascript file and that way reducing the size of the subsequent files.
Is there a way to achieve this?
If anyone's curious how I'm transpiling each legacy js file individually.
glob.sync(PATH).forEach((file) => {
exports.push({
entry: file,
output: {
path: path.resolve(__dirname),
filename: file,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
devtool: 'eval',
});
});

I found a way so here's how my set up is currenlty looking.
.babelrc "useBuiltIns": "entry" makes it so you polyfills (and helper methods too?) are only inserted when requested. In other words when you call "import" at the top of the file. This allows me to create a polyfill.js file with nothing in it other than import "core-js"; which turns into a much larger file with all the polyfills I need.
{
"presets": [
[
"#babel/preset-env",
{
"corejs": "3.6.4",
"useBuiltIns": "entry",
"targets": {
"ie": "11"
}
}
],
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/transform-runtime"
],
"sourceType": "unambiguous"
}
the webpack configuration for these files looks like (the exports collection is ultimately assigned to module.exports).
glob
.sync(PATH)
.forEach((file) => {
let config = {
entry: file,
output: {
path: path.resolve(__dirname),
filename: file,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}],
}
};
exports.push(config)
});
needless to say polyfill.js is the first script called in my html.

Babel not transpiling node_modules using Laravel Mix

I am trying to enable support for IE 11 in my application. However, some of my dependencies haven't transpiled the code to es5. Therefor, I tried added one of them to my rules, but it still doesn't transpile that dependency.
This is how I am including my dependency, this time being vue2-google-maps. However the produced code still contains Object.entries after running npm run dev.
mix.webpackConfig({
module: {
rules: [
{
test: /node_modules\/(vue2-google-maps)\/.+\.js$/,
use: [
{
loader: 'babel-loader',
options: mix.config.babel()
}
]
}
]
}
});
mix.js('resources/js/app.js', 'public/js')
.extract()
.babel(['public/js/manifest.js'], 'public/js/manifest.es5.js')
.babel(['public/js/vendor.js'], 'public/js/vendor.es5.js')
.babel(['public/js/app.js'], 'public/js/app.es5.js')
Here is a similar question, but the answer didn't help me yet. Here is another similar question, but there is no answer in that one.
Here is my .babelrc:
{
"presets": [
[
"#babel/preset-env",
{
"targets": { "ie": "10" }
}
]
]
}
What am I doing wrong? Why is not the dependency also transpiled?

Inspect your config with: mix.dump();
b/c your rules and test look good (helpful & worked for me in different scenario).
I'd give a try to mix.babelConfig(<your config>) - seems to be more explicit to me

Use babel for transpiling vue template instead of buble

I'm trying to use #babel/plugin-proposal-optional-chaining so I can do like {{ user?.name || 'Oops' }} in my vue templates. I have added the plugin to my babel.config.js, but it still comes up with a vue-loader error. After some searching it seems like vue uses buble instead of babel for transpiling the js inside the template tag.
Is there a way to use babel instead of buble for transpiling the js in the template?

If you are using webpack, try this on build/webpack..conf.js
(replace where the test matches and adjust to your preferences)
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
use: [{
loader: "babel-loader",
options: { presets: ['es2015'], compact: false } // Add here your options!
}]
},
...
]
...
}
...
}
Maybe you have to install and configure babel with a file .babelrc to add the proposal and babel-loader
If not webpack, please, add more info about your project structure and the way to compile/transpile it (or migrate to webpack, is a good friend to transpile).
Also if you need more help let me know.
Hope it helps at least a bit :)