Tips for customizing babel's preset plugin configurations

I've integrated babel-preset-react-app into my project with the following .babelrc configuration:

{
  "presets": ["react-app"],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

Currently, I'm facing a challenge in customizing the options for babel-plugin-transform-runtime. Despite my attempts to install the plugin and modify the .babelrc as shown below:

{
  "presets": ["react-app"],
  "plugins": [
    ["babel-plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": false
    }],
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

This approach doesn't seem to be effective for me.

Is there an alternative method I can explore without having to manually copy and paste the entire preset into my .babelrc file?

javascriptwebpackbabeljscreate-react-appbabel-plugin

Answer №1

It appears that the current version of Babel does not have built-in support for these types of overrides as discussed in this GitHub issue. Fortunately, a workaround has been discovered specifically for the babel-preset-react-app. An undocumented option called useESModules can be utilized:

['react-app', { useESModules: false }]

Below is a configuration using babel-plugin-react-app that functions effectively with node.js:


    presets: [
        ['react-app', { useESModules: false }],
        [
            '@babel/preset-env',
            {
                modules: 'commonjs',
                targets: {
                    node: 'current',
                },
            },
        ],
    ],

It is recommended to stick with using babel-preset-react-app if you are utilizing create-react-app for your client-side bundling. However, if you are not using create-react-app, then simply consider using @babel/preset-react directly, eliminating the need for overriding the useESModules setting.

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

Ways to incorporate error handling in node.js/express when using mySQL operations

I am currently focusing on enhancing the error handling capabilities in my node/express application, however, I find myself a bit confused. As an example, here is a route within my code that I wish to refine: app.get("/api/max-value", function (req, res) ...

javascriptmysqlnode.jsexpresserror-handling

I'm having some trouble with my jQuery.get() function in the javascript Saturday(), can anyone help me figure out what I'm doing wrong?

Can anyone help me troubleshoot my jQuery.get() method in the saturday() JavaScript function? Here is the code snippet I have been working on. This is what I have in my index.html file: <html> <head> <title>jVectorMap demo</title> ...

javascriptjqueryhtmlajaxhighcharts

Manipulate DIVs by sliding them and resizing their contents with JQuery

Can someone help me with sliding the top div up and down, and the left div left and right? I wrote some code for this but seem to be facing some issues. When I slide the left div, the center content falls down momentarily. Additionally, the code doesn&apos ...

javascriptjqueryhtmlslider

Difficulty Converting Array of Objects to Proper Type with Q.Promise and KO.mapping

I have encountered an issue while trying to filter an observable array. It seems that the ko.utils.arrayFilter method is converting all my model's field names to lowercase, causing unexpected behavior. I should mention that this project involves Types ...

javascriptarraysknockout.jstypescriptq

Utilize a dynamic URL within the HTML audio element

Currently, I am working with the use of the audio tag in HTML and AngularJS. I need to specify the source of the audio file I want to play, as shown below. <audio src="http://localhost/audio/221122/play/212223.mp3" audio player controls p ...

javascripthtmlangularjsaudio

Can I invoke a specific function from a controller in AngularJS?

I am new to developing in the MEAN stack and working on a Todo App where I create tasksheets and store todos within those specific tasksheets using AngularJS. Initially, I was retrieving all todos without considering which tasksheet they belonged to or cr ...

javascriptjqueryangularjsnode.js

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

I've encountered an intriguing issue that I'm hoping someone else has come across and resolved before. In this particular application, I have implemented a 'change my password' option for users. If a user forgets their password, they c ...

javascriptajaxzend-frameworkjquery

Is it not possible to utilize async/await with MongoDB Model, despite it yielding a Promise?

Currently, I am facing an issue with a function in my code that is supposed to retrieve a user's inventory and then fetch the price property of each element using data from a Price Collection. Below is a snippet of the function (not the entire thing, ...

javascriptnode.jsmongodbmongoosemongodb-query

Submitting a form through Ajax is resulting in multiple submissions

Whenever I use Ajax to submit this form, it ends up posting multiple times without any obvious reason. Sometimes, it posts the form up to 10 times even though the submit button is clicked only once. I'm puzzled as to why this behavior is happening. An ...

javascriptphphtmlajaxforms

Instructions on how to save HTML "innerHTML" along with attributes to a text document

I'm currently developing an HTML export feature from a DIV tag that includes various elements and attributes. HTML: <div id="master"><span class="classname">content goes here</span></div> <span class="download" onclick="ca ...

javascriptjqueryhtml

Can someone show me how to code a function that transforms my paragraph into an image when I hover over it?

< p id="p1" onmouseover="this.style.color='transparent';flipPara()"> < p id="p2" onmouseover="spookyPara()"> function spookyPara() { document.getElementById("p1").attribute = "All_Images/ghost.png"; } I currently have this code sn ...

javascripthtmlcssimagefunction

When an object is pushed into an array, it gets duplicated and also appears in a proxy when viewed in the console

Working with Firebase 9 and Vue 3 in building a chat application. The issue at hand is that when I push message objects to the messages array [], the console shows duplicates like this: Proxy {0: {…}, 1: {…}} [[Handler]]: Object [[Target]]: Array( ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Guide on organizing an array of objects by the sub-part of their property values

Is there a way to order the elements in the given array based on a custom criteria related to the last 3 letters of 'prop2' in descending order? The specific order should be 'ABR', 'FDE', 'ZFR'. Another array needs t ...

javascriptarrays

Replicate the functionality of a backend API using AngularJS

Currently, I am in the midst of creating a GUI for an application that is still undergoing API development. Although I have a vision of how it will look, it lacks functionality as of now. Hence, I need to replicate its behavior until the API is fully funct ...

javascriptangularjs

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

One of my goals is to make the cancel button available only when at least one job is selected. Below is my HTML View <table> <tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'"> <td style="widt ...

javascripthtmlangularjscheckbox

Implementing a JavaScript function that uses the AJAX method to confirm and update

I am currently attempting to update a database using the JavaScript confirm() function in combination with AJAX. My goal is to have "accepted_order.php" run if the user clicks "OK," and "declined_order.php" run if the user clicks "Cancel," all without caus ...

javascriptjqueryajax

Is there a Node template engine similar to EJS that seamlessly integrates with HTML templates?

Is there a template engine for NodeJS similar to EJS that doesn't alter the original HTML template structure with its use of parentheses? In EJS, one might utilize the following code snippet to embed specific data into the HTML template: <script& ...

javascripthtmlnode.jstemplates

Issue with ng-selected when used alongside ng-options or ng-repeat in Angular

My application features a form where users can fill out their starting point and choose from 350 possible destinations to get directions using Google Maps. Users can select their destination by either clicking on a pin on the map or choosing from a drop-do ...

javascriptangularjsng-optionsangularjs-select

Trouble with the filter function in the component array

I am facing an issue with creating and deleting multiple components. I have successfully created the components, but for some reason, I am unable to delete them when I click on the "delete" button. state = { data: '', todoCard: [], id ...

javascriptarraysreactjs

Is it possible in MongoDB to embed a collection within a document of another collection?

Working with Javascript, Node.js, Express, and MongoDB for a web application. Users can create an account with fields for name and last name, but I also need to track completed steps using a boolean value (false for uncompleted, true for completed). Instea ...

javascriptnode.jsmongodbexpressmongoose