webpack not transpiling arrow functions with babel-preset-env

I'm currently facing an issue with converting arrow functions to work on Internet Explorer using babel and webpack. Despite my efforts, I haven't been able to get it functioning properly.

Here are the dev dependencies listed in my package.json file:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.0"
  }

This is how my webpack.config.js looks like:

module.exports = {
  entry: ['./chat.js'],
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "chat.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }  
};

The plugins being used are listed in .babelrc:

{
  "presets": ["env"],
  "plugins": ["transform-class-properties"]
}

Encountering a syntax error when trying to run the code on Internet Explorer:

DF.fn = () => {
        // Code content
};

Answer №1

If you have upgraded to Babel 7, there is a significant change in the behavior of .babelrc configuration file.

I suggest abandoning the use of .babelrc and integrating the configuration directly into your webpack setup.

Furthermore, you may need to reconsider eliminating exclude: /node_modules/ from your configuration or adjusting it to accommodate libraries with browser incompatible code like arrow functions for compatibility with older browsers such as Internet Explorer.

In my experience, removing the exclude parameter altogether did not result in any noticeable decrease in performance or bundled file size.

Answer №2

Webpack 5 users must now specify the features they want to transpile in the ouput.environment configuration. You can find more information about this here.

In my case, I am utilizing a feature called differential serving and have adjusted all the flags based on a variable called modern. This variable is set to true only when building for modern browsers, which includes the latest 5 versions of Chrome and Firefox, as well as the latest 2 versions of Safari, Edge, and iOS.

output: {
  // ... other configs
  environment: {
    arrowFunction: modern,
    bigIntLiteral: modern,
    const: modern,
    destructuring: modern,
    dynamicImport: modern,
    forOf: modern,
    module: modern,
  },
}

Answer №3

To ensure your build works well on all target browsers, you need to define them clearly. With babel-preset-env, the necessary transformations are determined based on specified browsers. For more information and a configuration example, visit the documentation.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

For various ways to specify browser sets, check out this resource.

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

Combining Arrays in AngularJS: A Step-by-Step Guide

I have two arrays with dynamic values: $scope.objectName = [{ Name: '' }]; $scope.propertiesElement = [{ Key: '', Value: '' }]; How can I concatenate these arrays to achieve the following result? [{Name:''},{ Key: ...

Struggling with handling numbers and special symbols in the Letter Changes problem on Coderbyte

Hello I have been struggling to find a solution for my current issue. The problem lies within an exercise that requires changing only alphabetical characters, but test cases also include numbers and special characters which are being altered unintentionall ...

Is it possible to style React components with CSS without needing to directly import CSS files into the component itself?

In search of new approaches, the task at hand revolves around discovering innovative ways to implement CSS styles on React components without the need for importing external CSS files directly into the component. One method I explored was using inline sty ...

Tips for removing alert notifications from Pusher

I have integrated PUSHER into my website for notifications. The codes are successfully added and it is working fine. However, the issue arises when the alert is triggered as I am receiving messages that are not what I expected. The message received from t ...

Using jQuery's deferred.done method to send an array of data to the done function

I followed the method outlined in https://api.jquery.com/jquery.when/ to execute a series of ajax calls (using the example $.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ) on that page). The code below is functional; however, I am struggling with ...

Tips for utilizing jQuery to check for a value within an input field?

Hey there! I'm currently teaching myself jQuery in order to achieve a specific effect. I'll do my best to explain my issue, but please bear with me as English is not my first language. My current goal is to create an input field that will disapp ...

Is the output returning before the AJAX call is completed?

Similar Question: How can I get the AJAX response text? When calling a JavaScript method that sends an Ajax request and receives a response in a callback function labeled "success," sometimes the JavaScript method returns a result as "undefined" inste ...

Tips for incorporating Angular2 into Eclipse using TypeScript

Recently, I delved into the world of Angular 2 and noticed that TypeScript is highly recommended over JavaScript. Intrigued by this recommendation, I decided to make the switch as well. I came across a helpful guide for setting up everything in Eclipse - f ...

Creating a dynamic line in Three.js that connects the closest vertices from two models

I am facing a challenge with loading two models into a scene using OBJloader and the Three.JS library. Some of the models are billboarded by using model.setRotationFromQuaternion( camera.quaternion ); My main objective is to create lines connecting a vert ...

Retrieve documents from MongoDB database that have specific characteristics

Hello everyone, Today I'm trying to navigate mongoose queries. Imagine we have a collection like this: [ {letter: "A", name: "Books", action: "read"}, {letter: "B", name: "Notebook", action: &q ...

Sharing ngModels in Angular.js

Here's a snippet of my HTML code. <input type="text" id="ghusername" ng-model="username" placeholder="Github username..."> <span id="ghsubmitbtn" ng-click="getUsers()">Pull User Data</span> This section pertains to Controller A ...

Can someone show me how to create an Array of Buttons using JavaScript? Also, I'm looking for guidance on how to generate random images using this code

Currently, I am working on creating a Memory Game. My main focus right now is setting the card images randomly, but for some reason, my code only displays the top image. var images = ["url(IMG1.jpg)","url(IMG2.jpg)"...]; var randomIMG =0; var card = "< ...

What is the best way to transfer the useState set state function to a child component in TypeScript?

Since delving into typescript, I've encountered an issue with passing a useState setter function. My parent component looks like this: const [word, setword] = useState('run') When passing props to the child component, it's done as fol ...

Is there a way to keep a JS script running even after navigating away in the Google Chrome console?

Assume there is a basic script available var x = 0; run(); function run() { console.log(x++); setTimeout(run, 1000); } If I input it into the Google Chrome console. How can I keep it running even after navigating to another page (continuously d ...

What is a way to perform pre-increment without utilizing the ++I operator?

It is my belief that the code snippet below: i += 1 or i = i + 1 does not have the same effect as ++i. Am I incorrect in this assumption? Is there an alternative method to achieve pre-increment without utilizing the ++ operator? ...

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

In my Angular 2 and Typescript project, I am utilizing rxjs. The goal is to share a common web-resource (referred to as a "project" in the app) among multiple components. To achieve this, I implemented a service that provides an observable to be shared by ...

The console is being flooded with API logging messages multiple times

My goal is to develop a search page for Pathfinder. I have crafted the following code in an attempt to retrieve data from the API. During the process of testing the fetch requests, I have noticed that when I console.log the fetched data, it appears multipl ...

Tips for adjusting the page display when errors occur during form submission

Within my django application, I have designed a page featuring a button that controls the operation of a clock. Initially, the page displays only the button, with a hidden form where users can input details such as their name and description. When the butt ...

Is it feasible to solely utilize the "else" block for an "if...else" statement in JavaScript?

Is it possible to have an "else" block without an "if" statement in JavaScript? If so, what is the syntax for this situation? if (req.body[data].length <= maxlength[indx]); // <===== semicolon else { req.body[data] = 'ERROR: too lo ...