What is the reason behind Babel including this redundant line of code in my build?

While utilizing Babel 7 and Gulp 4 in conjunction, I have noticed that the subsequent line of code is repeated five times within my build:

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Could there be something amiss as this seems redundant? Below are specifics of my setup:

package.json

"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/register": "^7.8.3",
    "babel-eslint": "^10.0.3",
    "del": "^5.1.0",
    "eslint": "^6.8.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^6.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-terser": "^1.2.0"
},
"dependencies": {
    "@babel/runtime": "^7.8.4",
    "core-js": "^3.6.4",
    "lodash": "^4.17.15"
}

gulpfile.babel.js (contains only the function utilized for the build task)

function createBuildTask() {
    var sourceArray = [
        // The actual building process involves 12 different files but has been condensed here
        'file1.js', 'file2.js', 'file3.js', 'file4.js', ...
    ];

    return function () {
        return gulp.src(sourceArray, {'allowEmpty': true})
            .pipe(babel({
                'presets': ['@babel/preset-env'],
                'plugins': []
            }))
            .pipe(concat('desktop-built.js'))
            .pipe(gulp.dest('desktop/dist'))
            .pipe(terser())
            .pipe(rename({
                'extname': '.min.js'
            }))
            .pipe(gulp.dest('desktop/dist'));
    };
}

Steps taken so far:

  1. Applying options to @babel/preset-env:

    'presets': [['@babel/preset-env', {
        'modules': false,
        'useBuiltIns': 'entry',
        'corejs': 3
    }]],
    'plugins': ['@babel/plugin-transform-runtime']

...yet the duplicated lines revolving around Symbol persist even after compilation.

What would be the correct approach to eliminate this duplication and ensure that the aforementioned line of code appears just once?

Answer â„–1

The introduction of the ES6 Symbol() type is the reason behind this issue. If you opt not to utilize it, you can prevent namespace pollution like this, but you must remember to exclude it as an option in the preset:

--- a/babel.config.json
+++ b/babel.config.json
@@ -1,15 +1,18 @@
 {
   "plugins": [
     "@babel/plugin-transform-strict-mode",
     "add-module-exports"
   ],
   "presets": [
     [
       "@babel/env",
       {
         "bugfixes": true,
+        "exclude": [
+          "@babel/plugin-transform-typeof-symbol"
+        ],
         "modules": "auto"
       }
     ]
   ]
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the display after adding an item to an array in Angular

Currently, I am facing an issue with updating the view based on adding an item to an array of objects through a click handler. While the item is successfully pushed into the array, it does not reflect in the view. I am wondering if placing the method withi ...

Utilizing Vue with Nuxt.js: A Guide to Parsing POST Request Parameters from External Sources

I am currently facing an issue with accessing the POST request parameters from an external form in my nuxt app. Despite trying to utilize the "asyncData" method, I continue to receive an "undefined" value when attempting to access the submitted parameter t ...

Using ajax to process form submissions

I'm encountering an issue with a form that I'm using to submit data via ajax. Firebug is throwing an error "ReferenceError: editUser is not defined". The form is located within a modal and I'm intending to use it for editing user information ...

What is the reason for the delay in the firing of this document.ready event

Similar Question: Understanding window.onload vs document.ready in jQuery I seem to be encountering a problem: I have an image on my webpage that is relatively small. I also have a JavaScript function that dynamically sets the height of the left sideb ...

Experiencing a [$compile:multidir] error when attempting to implement a multiselect dropdown with Angular.js

I encountered an issue when utilizing a multi-select drop-down list in Angular.js. Error: angularjs.js:107 Error: [$compile:multidir] http://errors.angularjs.org/1.4.6/$compile/multidir?p0=ngDropdownMultiselec…22%20checkboxes%3D%22tr ...

Generating Javascript code with PHP and handling quotes successfully

After encountering an issue with apostrophes causing errors in my PHP-generated HTML, I found a solution that involved using the addslashes() function. Here is the code snippet: <?php $lines = array(); $lines[] = "I am happy"; $lines[] = "I'm hap ...

Instructions on combining two Objects retrieved from user input's value

I have a dilemma with two JSON structures that I need to combine: First Object: {"9":{"322":{"apples":"42"}}} Second Object: {"10":{"323":{"bananas":"78"}}} The desired outcome should look like this: { "9": { "322": { "apples": " ...

The AWS CodeBuild build for 'npm run build' failed, while it successfully completed on my local machine

My ReactJS application is deployed on AWS using CodePipeline and CodeBuild. However, during the AWS CodeBuild stage, the 'npm run build' command continues to fail with the following error: > next build info - Loaded env from /app/.env.product ...

How to use AJAX to retrieve the text content of an HTML option value?

I have a script that displays a list of values, which I want to write: <option th:each = "iName : ${iNames}" th:value = "${iName}" th:text = "${iName}" th:selected="${selectedIName == iName}" In addition, I have the function setSelectedName in my .j ...

How to send emails with attachments using WordPress?

Looking for assistance in sending emails with attachments using Wordpress. I am struggling and believe there might be something missing in my code. Any help would be greatly appreciated! :) Below is the code spread across two files: Name (required)<b ...

Implementing a search filter in Vue.js using a nested for loop

I am currently working with a JSON object that contains nested objects and I need to iterate over them to extract data. Everything is functioning correctly, but now I want to implement a search/filter feature where the search is performed on the second lev ...

Utilize utility functions within the onCreated lifecycle event in Meteor

Here is my current setup: Template.myTemplate.helpers({ reactiveVar: new ReactiveVar }); How can I initialize reactiveVar within the onCreated function? Template.restaurantEdit.onCreated(function() { // I want to initialize helpers.reactiveVar here ...

Exporting Data and Utilizing a Steady Data Table

I have incorporated the Fixed Data Grid into my latest project. https://facebook.github.io/fixed-data-table/example-sort.html My goal is to generate csv and pdf reports from the data displayed on the grid. Could you please advise me on how to export gri ...

Preloading Vue dynamic routes for optimal performance

Currently dealing with a challenge on my Vue project and could use some help. I'm looking to prerender specific dynamic routes when I navigate to a particular route within the application. On the /works route, there's a list of items displa ...

Ways to evaluate negative numbers in JavaScript

I need to validate latitude and longitude values within the range of -180 to 180. If a number falls outside of this range, an error should be displayed. Below is the code I have written for this validation: if((markerPoint[0] && parseInt(markerPoint[0] ...

What is the best way to initiate a collapsed jQuery toggle?

Is there a way to make a jQuery toggle collapsed by default? I've looked at some examples, but none of them seemed to fit my specific setup and I couldn't quite figure them out. Here's the HTML code: <table border="0" width="100%" alig ...

Suggestions on how to refactor redundant code in various peer AngularJS controllers for handling $intervals

In my compact single-page application, I have implemented multiple tabs to display operational status information for different applications. Each tab is associated with a controller that creates $interval objects to make AJAX calls to fetch status data fr ...

How can we effectively reroute HTTP requests according to the information stored in a database?

When operating an express server, what is the appropriate method for redirecting incoming requests? In my application, I have two routes: POST and UPDATE. The POST route is responsible for creating a new item in the database, while the UPDATE route increa ...

Toggle the ASP validation control using JavaScript

I am looking to control the validation of my form using JavaScript. When a user clicks on a radio button in a list (yes or no), 2-3 rows are displayed. If the user selects "Yes," they must enter input into a textbox in one of those rows. To enforce this, ...

What is the best way to incorporate Drift bot JS code into a static React NextJs application, such as a landing page?

I'm a beginner with ReactJS and I recently created a static website using ReactJS & NextJs. I decided to integrate a chatbot called 'Drift', but when following the installation instructions to insert JavaScript code in the <head> of HT ...