Babel 7 encounters an issue with a lone plugin: "Error - Plugin/preset found duplicated."

The problematic plugin is 

@babel/plugin-transform-regenerator
, which has a high download rate of 1.6 million per week.

This is the complete content of my .babelrc file:

{
  "presets": [],
  "plugins": [
    "@babel/plugin-transform-regenerator"
  ]
}

While attempting to transpile it with parcel using the command 

parcel build source/main/index.html --no-source-maps --out-dir build
, I encounter the following error: 

/path/to/index.js: Duplicate plugin/preset identified.
To use two distinct instances of a plugin, they must have unique names, for example:

plugins: [
  ['some-plugin', {}],
  ['some-plugin', {}, 'some unique name'],
]
... (additional error message continues)

The versions listed in my package.json are as follows:

"@babel/core": "^7.1.2",
"@babel/plugin-transform-regenerator": "^7.0.0",

Any suggestions?

javascriptnpmbabeljsparceljs

Answer №1

If you've encountered a Babel error stating that the plugin 

@babel/plugin-transform-regenerator
has been defined twice, it's likely due to an indirect duplication.

When using Parcel Bundler, your code is transpiled by default using the Babel preset @babel/preset-env, which consists of a set of shareable plugins. The preset-env already includes 

"@babel/plugin-transform-regenerator"
in Babel 7, as documented here.

A simple solution would be to remove 

"@babel/plugin-transform-regenerator"
from the plugins configuration in your .babelrc.

In my own experience migrating from Babel 6 to 7, I had to update my config because certain plugins like transform-object-rest-spread, 

transform-async-generator-functions
, and transform-async-to-generator were redundant with the inclusion of env.

To assist in upgrading, Babel provides a helpful tool called babel-upgrade for renaming plugins, though it may not resolve all duplicate issues.

I hope this information proves useful.

Answer №2

Upon conducting thorough investigation, it appears that the error in question is most likely caused by the presence of default plugins that are also utilized internally by this particular plugin.

To effectively address this issue, simply follow the instructions provided in the error message: Assign a distinctive name to the plugin as shown below:

"plugins": [
    ["@babel/plugin-transform-regenerator", {}, 'unique-name']
]

Answer №3

I encountered similar challenges today and found a solution:

{
"presets": [
   "@babel/preset-env",
   "@babel/preset-react"
],
"plugins": [
    "transform-object-rest-spread",
    "transform-class-properties"
] 
}

Answer №4

If you want to eliminate the use of 

"@babel/plugin-transform-regenerator"
, simply delete it from the list of plugins:

"plugins": [
     // Remove or comment out "@babel/plugin-transform-regenerator"
]

Answer №5

I encountered a similar issue with a different plugin, but I believe the root cause is the same. The plugin causing trouble for me was:

@babel/plugin-proposal-object-rest-spread

After some investigation, I realized that this plugin was present in both devDependencies in package.json and plugins in webpack.config.js. Removing it from the webpack configuration resolved the issue.

It seems like you may be facing a conflict between .babelrc and package.json. My recommendation would be to follow the same steps as I did. Avoid duplicating plugins in multiple files simultaneously.

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

Transform every DIV element into a TABLE, replacing each DIV tag with a combination of TR and TD tags

I have a code that is currently structured using DIV elements. However, I've encountered alignment issues when rendering it in EMAIL clients. To address this problem, I am looking to convert the DIV structure to TABLE format. Below is the original co ...

javascriptjqueryhtmlcssangular

Looking to alter the appearance of a div within an iframe by matching it with the title of the parent window using javascript?

I am currently working on a parent page titled Criatweb, which contains an iframe page. My goal is to modify the display of a specific div within the iframe page only when its title matches Criatweb. I attempted to implement the following script within t ...

javascripthtmliframe

Can PHP send back data to AJAX using variables, possibly in an array format?

My goal is to transmit a datastring via AJAX to a PHP page, receive variables back, and have jQuery populate different elements with those variables. I envision being able to achieve this by simply writing: $('.elemA').html($variableA); $('. ...

javascriptphpjqueryjsonajax

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

javascriptjqueryhtmlcssanimation

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

Performing AJAX in Rails4 to update boolean values remotely

Suppose I have a model named Post which includes a boolean attribute called active. How can I efficiently modify this attribute to either true or false directly from the list of posts in index.html.erb using link_to or button_to helper along with remote: ...

javascriptruby-on-railsajaxruby-on-rails-4

Styling on Material UI Button disappears upon refreshing the page

I've been using the useStyles function to style my login page, and everything looks great except for one issue. After refreshing the page, all styles remain intact except for the button element, which loses its styling. Login.js: import { useEffect, ...

javascriptreactjsmaterial-uistyling

It seems like the texture may not have been created correctly

My WebGL app for volume ray casting is nearly complete. However, I have encountered an issue with simulating a 3D texture using a 2D texture. Creating a large texture from smaller slices, the dimensions of the huge texture are approximately 4096x4096px. Th ...

javascriptthree.jswebglvolume-rendering

Cypress triggers timeout error due to oversized response

Issue Encountering a timeout error with Cypress when making a GET request. Description Using Cypress.io to send a GET request. Expecting a large response body (over 15Mb) from the API, but instead receiving an error message: "CypressError: cy.request( ...

npmcypress

jQuery includes inArray as the final element in an array or object

There's a strange issue I've noticed where, in some cases, when jQuery is imported, it appends the inArray function as the last element of a defined object or array. This can cause problems with for ... in loops since it counts this unexpected fu ...

javascriptjquery

How can I verify my identity on an external website using jQuery?

I have created a user-friendly login form on my website for easy access. After logging in, users can explore and conduct searches on a 3rd party site that we are partnered with, which provides access to a database resource. The issue lies in the fact that ...

javascriptjquery

How to Implement Multiple OR Statements in SharePoint 2010 Using Jquery and JSON Rest

Struggling to create a multiple OR variable, but it just won't work. Is there an issue with my syntax or logic? var category = (i.Category == "Electric" ? "E" : i.Category == "Power Module" ? "PM" : i.Category == "Branch Office" ? "BO" : ""); After ...

javascriptjqueryjsonvariablessharepoint

Using Angular service worker to pre-fetch video files

Issue arises when the service worker prefetches the entire video embedded on the page, leading to performance problems. My ngsw-config.json only contains configurations for local files, whereas the video is located on a different subdomain under /sites/def ...

javascriptangularrequesthtml5-videoservice-worker

"Exploring the power of Node.js Virtual Machines and the magic of

I'm currently facing a challenge with reading and extracting data from a dynamically generated HTML file that contains a commented out JavaScript object. My goal is to retrieve this object as a string and execute it using VM's runInNewContext(). ...

javascriptregexnode.jsexpress

Develop a Vue component for a fixed sidebar navigation

I am in need of a vertical navigation bar positioned to the left of my app's layout, with the content extending across the right side. However, I am currently facing an issue where the navbar is pushing all the content downwards. How can I resolve thi ...

javascriptcssvue.jsvuejs2vuetify.js

Utilize Tweakpane by incorporating it as a npm module

Recently, I've been delving into the world of NPM, bundlers, and ES6. I decided to incorporate Tweakpane into a project, so I went ahead and installed it using NPM. Afterwards, I attempted to import it with the following code: import { Tweakpane } f ...

npmecmascript-6

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

javascripthtmlangularjsnode.jsfile-upload

Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu. Be ...

javascriptgoogle-chrome-extension

Struggling to align images side by side using HTML and CSS along with figcaption and buttons

Adding buttons below images on my webpage is proving to be a bit challenging. I tried using the figcaption tag, but it resulted in the images stacking on top of each other instead of side by side. **My HTML:** <section class="mostpurch"> ...

javascripthtmlcss

Tips for fixing View Encapsulation problem in Angular8

I have a parent component and a child component. The child component is created as a modal component. I have included the child component selector inside the parent component and set the view encapsulation to none so that it will inherit the parent compone ...

javascriptangular