Technoarch Softwares - Why do we need babel?

Why do we need babel?


Babel is a javascript Compiler used to convert  ECMAScript 2015+ code to previous versions of javascript for older browser environments. In simpler terms it helps us to run our code and increase browser compatibility. Things that help babel to perform this conversions are by

  • Polyfill features that are missing in your target environment 

  • Source code transformations 

  • Transform Syntax 

Process to set this up Babel

  1. Installing Babel using npm

Running commands to install the packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
npm install --save-dev @babel/preset-react


Babel configuration

Creating a config file named .babelrc


plugins are small JavaScript programs that instruct Babel on how to carry out transformations to the code. You can write your own plugins and apply any transformations you want to your code. 

For example we can use plugin-transform-arrow-functions to convert the arrow function into  ES5 compatible functions.

const Tn = () => 1;
// converted to
var Tn = function Tn() {
return 1;




Presets are array of babel plugins or sharable options config, we don’t know what plugins need to be imported for our code transformations. We can always have the presets to do the work for us.

There are some official presets provided by babel.

  • @babel/preset-env

  • @babel/preset-flow

  • @babel/preset-react

  • @babel/preset-typescript


You also create your own presets as we know that are just array of babel plugins 

module.exports = () => ({
 presets: [
 plugins: [

        [require("@babel/plugin-proposal-class-properties"), { loose: true }],

Presets can contain other presets, and plugins with options.


Applying the custom preset into the config

  "presets": ["./myProject/myPreset"]





Babel Polyfill adds unavailable features for  web browsers. Babel compiles the ECMA code that is needed for the current environment, it changes the syntax as per the config presets, but cannot do anything for objects and methods used, so we have to use polyfill to overcome the backward compatibility.

Here is the list of things that need polyfill support when used in older browsers 

  • Promises

  • Map

  • Set

  • Symbol

  • Weakmap

  • Weakset

  • Array.from, Array.includes, Array.of, Array#find, Array.buffer, Array#findIndex

  • Object.assign, Object.entries, Object.values


Working with babel and webpack

When using webpack we need to add the babel-loader, the config options can be different but the structure will look something like this.

The polyfill will be imported at the entry,

So it will be first the polyfill load and then the entry file of the application.


Some issues faced in react JS while running it on older browsers 

  • SCRIPT 1002 : syntax error  

This is issue mostly occur in Ie11, there are fellow steps to resolve the issue

  1. Install react-app-polyfill and import 
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

In your src/index.js

  1. Install event-source-polyfill and add it in the webpack

Add it to webpack plugins

And also in the entry of the config 


  • SCRIPT 1006 : Expected ')' 

    This error comes when there is a  default arguments used in the code,
    in my case i resloved is by tracing the error lines in the stacktrace and found that there was a package that i had import which use ES6 and babel is not able to transform the code.
  • SCRIPT 1028 : Expected identifier, string or number

    in my case i resloved is by tracing the error lines in the stacktrace and found that there was a package that i had import which use ES6 and babel is not able to transform the code.

In both of this case the issue was in an imported package 

from this "require("csv-parse")"
changed to  "require("csv-parse/lib/es5)"

import csv from "csv-parse" 
import csv from "csv-parse/lb/es5




If we want to have web browser compatibility until ie11  die out we have to use the code transformers like babel to give us support and run our code into older versions of web browsers 



Leave a Comments

Your email address will not be published. Required fields are marked *