Disabling Babel in Nuxt.js: A Step-by-Step Guide

I've come to the decision to eliminate Babel transpilation from my projects, as I no longer see the need to accommodate pre-ES6 era browsers. However, my search efforts have yielded no results on how to go about this. My Nuxt project is currently filled with various '@babel' packages in the package.json file, and I am wondering if there is a straightforward way to completely remove Babel. Is it as easy as setting babel: false somewhere in the configuration? I am looking for a clean solution to remove all Babel-related dependencies. How can I achieve this?

javascriptvue.jsbabeljsnuxt.js

Answer №1

If you're looking for a solution, you might find this helpful: https://babeljs.io/docs/en/options#ignore

According to the nuxt docs, you could give this a try:

export default {
  ...
  build: {
    babel: {
      babelrc: './.babelrc',
    }
  },
  ...
}

In your .babelrc file, you can add the following line:

{
  "ignore": [
    "**/*"
  ]
}

I haven't tested it myself, but it's worth considering as a possible solution.

Answer №2

My configuration includes

build: {
    babel: {
      babelrc: false,
    },
}

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

Who is responsible for the addition of this wrapper to my code?

Issue with Sourcemaps in Angular 2 TypeScript App Currently, I am working on an Angular 2 app using TypeScript, and deploying it with the help of SystemJS and Gulp. The problem arises when I try to incorporate sourcemaps. When I use inline sourcemaps, eve ...

javascripttypescriptangulargulpsource-maps

The use of jQuery.parseJSON is ineffective for a specific string

Why isn't jQuery.parseJSON working on this specific string? ({"stat":"OK","code":400,"data":[{"title":"Development Convention","event_type":false,"dates_and_times":[{"date":"28\/03\/2012","start_time":"10:00 AM","end_time":"10:00 AM"},{"dat ...

javascriptjqueryjsonparsing

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

pythonhtmlvue.jsflaskimport

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

I have a button with both the label and onClick properties. Additionally, I have an array containing the values I need to assign to the label property. Here is the code snippet: render(){ {tabel_soal.forEach(function (item, index) { <Ra ...

javascriptreactjsfunction

In the Nuxt.js async method, there is an error stating that the property 'info' does not exist on the type 'Vue'

I'm currently working on storing an API response in the async method of my Nuxt js application within a variable called info. However, I keep encountering this error message: Property 'info' does not exist on type 'Vue'. Interestin ...

vue.jsvuejs2nuxt.js

Interested in transforming and showcasing dates within a MySQL database?

Here's a form with 10 JQuery UI date pickers set up: $(function() { $("#datepicker").datepicker({ minDate: 'today', maxDate: "+90D", showOn: "button", buttonImage: "images/calendar-new2.jpg", buttonImageOnly: true, dateFormat: "D, dd M, yy" ...

phpjavascriptmysqljquery-ui

Retrieve data from backend table only once within the bootstrap modal

How can I retrieve values from a table once a modal is displayed with a form? I am currently unable to access the values from the table behind the modal. Are there any specific rules to follow? What mistake am I making? I would like to extract the values ...

javascriptjqueryhtmltwitter-bootstrap

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

Having trouble establishing a connection between Node.js and SQL Server using Tedious library

When attempting to connect to a local SQL Server instance using Node.js and Tedioius, I encounter the following error: { [ConnectionError: Failed to connect to XXXXX:1433 - connect ECONNREFUSED] name: 'ConnectionError', message: 'Failed ...

javascriptsql-servernode.jstcptedious

Breaking down React.js element

This Navigation component handles various functionalities related to user authentication and routing. import React from 'react'; import {Navbar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap'; import {BrowserRouter, L ...

javascriptreactjs

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

javascripthtmlnavbarbootstrap-5angular13

What causes my slider to speed up with an increase in items and slow down with fewer items in bxslider?

Find more information here jQuery('.homepage_slider').bxSlider( { minSlides: 1, maxSlides: 4, slideWidth: 200, slideMargin: 30, ...

javascriptjqueryperformancesliderbxslider

Tips for resolving flickering animations in CSS and JavaScript

Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...

javascriptcss

Choosing a combination of classes

For my web application, I created checkboxes that control the visibility of windows by toggling classes on elements. My JavaScript code successfully achieves this functionality. $(document).ready(function(){ $('#field').change(function(){ ...

javascriptjqueryjquery-selectors

angular click triggers the following content

How can I make the following content appear when clicked? I have a list of content that displays up to 20 items, but I want to show the rest when clicked. I have created the nextMovieList method for this purpose. import { Component, OnInit } from ' ...

javascriptangularapi

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

When it comes to defining functions, is it better to use variables or functions directly? Also, how does this affect tree-shaking? I am dealing with a lot of calculation-intensive helper classes and I am unsure about the optimal approach in terms of memor ...

javascripttypescriptfunctionclasstree-shaking

What is causing the scripts to fail when I attempt to press a button?

Clicking on the button is supposed to slowly reveal phone numbers on the page. Here are the HTML Codes: <span id="show-phone-numbers" class="btn btn-success"> <i class="fe fe-phone-call"></i> Show Phone Nu ...

javascriptjquerybootstrap-5

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

javascripthtmlnode.jsexpress

Utilizing Tweakpane for Debugging in a Vue Three.js Starter Template Project

Currently, I am utilizing the THRE-BOILER-TEMPLATE, a Vue.js and Three.js boilerplate, and I have a goal of incorporating a debugging UI using Tweakpane. With the unique architecture of this boilerplate being labeled as "the best," my interest lies in dete ...

vue.jsthree.js

Node.js route leads to a 404 error page due to a simple configuration

Trying to set up two separate routes using NodeJS with the express framework and Angular on the client side. The index page successfully renders at localhost:3000/. However, when attempting to render the login page by visiting localhost:3000/login, a GET / ...

javascriptangularjsnode.jsexpressroutes