What is the best way to use webpack in order to compile ES6+ code down to ES6

I am looking to compile my code into ES6 instead of ES5. Here is the configuration in my babelrc file:

{
"presets": [
    [
        "env",
        {
            "modules": false,
            "useBuiltIns": true,
            "targets": {
                "browsers": ["Chrome >= 60"]
            }
        }
    ],
    ["react"],
    ["stage-2"]
]}

By using babel-cli, I can successfully compile my code into ES6 format. For instance:

https://i.sstatic.net/X3bEK.png

However, when I introduce webpack and babel-loader into the same babel configuration, my ES6 code ends up being compiled into ES5.

So, my question is: How can I ensure that Webpack compiles ES6+ code into ES6+ code?

Does webpack automatically convert ES6+ code into ES5 during compilation?

Answer №1

Consider using the esmodules option for your target. Explore more about it here.

{
"presets": [
    [
        "@babel/preset-env",
        {
            "modules": false,
            "useBuiltIns": true,
            "targets": {
                "browsers": ["Chrome >= 60"],
                "esmodules": true
            }
        }
    ],
    ["@babel/preset-react"]
]}

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

Implement isotope filter on product page details using ASP.NET Core MVC

While working on my .Net core project, I implemented an isotope filter dynamically. Everything seemed to be functioning correctly, however, a minor error occurred. When selecting a specific category, the position of the product did not appear as expected. ...

Discovering a value that aligns with one of the values in an array using Javascript

Just a heads up: this quiz is super simple and only has one input field for each question. This block of Javascript code is used to check if the answer entered in the input field is correct or not. In this case, it checks if the answer entered is 'en ...

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

Apologies for any language errors, but I have a query regarding Bootstrap. I am currently working on making a website responsive and I have a row with 4 columns set up like this: The "seeMore" div is initially hidden and on clicking the boxToggle element ...

Learn how to display the value without reloading the page using AJAX on success

Currently, I am using AJAX to insert a value into the database. After successful insertion, I want to display the data on the frontend without refreshing the page. However, when I use window.location for this purpose, the page gets refreshed. I need guidan ...

"Oops, we hit a snag" notification appears when attempting to share on Facebook using the share dialog

I am currently integrating Django with Facebook for page sharing. Below is the code snippet I am using to form the URL: var link = 'https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&name=' + name + '&descripti ...

I am seeking a way for my menu to dynamically change depending on the specific view in React, without using reactdom.render

After noticing that my app only shows the menu bar when I have dev tools open, I realized I might be doing something wrong. On my landing page, there is a menu bar with the app's logo, menu items, and a log-in button in my web app. Here's an exa ...

gain entry to the chart object within highcharts

Having trouble accessing the chart object in Highcharts using the AngularJS directive HIGHCHARTS-NG. var chart = $scope.chartConfig.getHighcharts(); console.log("chart", chart); Encountering an error: $scope.chartConfig.getHighcharts is not a function. ...

What is the best way to extract specific information dynamically from an array of objects?

Scenario I have written code that successfully reads a local JSON file and converts it into an object. This part of the code is functioning flawlessly. My aim now is to develop a function that requires two inputs: The filepath of the JSON file to be con ...

Unable to access component template during routing操作

Currently implementing Vuejs. Here is the main js code snippet: import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false; new Vue({ render: h => h(App), router ...

An object rotating in a loop with Three.js will not cast a shadow over the entire scene

Why are some cubes in my loop not casting shadows? Despite using a directional light that should cast shadows on all cubes, the shadowing stops after around 5 columns. let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5); dirLight.position.set(300, - ...

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

Geocomplete Plugin without Google Branding

I've implemented the jQuery Geocomplete Library. This is what I have accomplished so far- $(function() { $("#find_product_location").geocomplete( { map: "#product_location", mapOptions: { mapTypeId : 'roadmap',//roadmap, satellite,hybrid ...

What is the best way to create the "hidden text" illusion using CSS?

Is there a way to create the 'text behind color effect' using CSS? https://i.sstatic.net/2T0ee.png https://i.sstatic.net/d6VC9.png https://i.sstatic.net/Slnzn.png ...

The issue with CORS is preventing the AJAX POST request from reaching the Express.js server, even with body-parser configured

Recently, I have been trying to send an AJAX POST request from my HTML page that is hosted on an Apache server. The goal of this request is to post a filename to an express.js server in order to perform some operations with another node. To facilitate this ...

After using `setAttribute`, React is unable to produce any audio

Currently, I am facing an issue with a React component where it should play sound from an array of IDs stored in the database by setting the ID to the src attribute for the source tag. However, this functionality is not working as expected. Interestingly, ...

Establishing a variable through a click event

I'm looking to dynamically generate links that, when clicked, will assign a value to a variable. This variable will then be used to display a profile. Here is the code snippet (with added console.log statements): var link = document.createElement("a ...

Discover the process of invoking the Vue Router within a custom function

In my VueCLI project, I have the following code snippet inside my methods: submitCheck: function () { function authUser() { // returns a promise } function uploadFile() { // also returns a promise } // ... if ( error !== null ) { EventBus.$em ...

Filtering an array by values that fall within the range of two other arrays can be achieved using JavaScript, especially

Within my possession are 2 arrays: var array1 = [{"name":"abc", "url":"http:://example1.com"}, {"name":"cde", "url":"http:://example2.com"}, {"name":"fgh", ...

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

Learn how to dynamically change the location of a Google Map using React

I have a Google Map component where the main component sends props (coordinates as an array) to display a new location on the map. However, I am facing an issue where the map does not refresh even though the coordinates are changing correctly and being rec ...