The identifier '_toConsumableArray' has been declared beforehand

Whenever I try to start my Redux app, I encounter the following issue:

./node_modules/draftjs-md-converter/dist/index.js
Syntax error: /Users/vlasenkona/Desktop/gris-seqr2/ui/node_modules/draftjs-md-converter/dist/index.js: Identifier '_toConsumableArray' has already been declared (196:9)

  194 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  195 | 
> 196 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
      |          ^
  197 | 
  198 | var parse = require('@textlint/markdown-to-ast').parse;
  199 | 
    at parser.next (<anonymous>)

This is the startup script that I am using:

'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const fs = require('fs');
const chalk = require('chalk');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const clearConsole = require('react-dev-utils/clearConsole');
const {
  choosePort,
  createCompiler,
  prepareProxy,
  prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');

const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT)
  .then(port => {
    if (port == null) {
      // We have not found a port.
      return;
    }
    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
    const appName = require(paths.appPackageJson).name;
    const urls = prepareUrls(protocol, HOST, port);
    // Create a webpack compiler that is configured with custom messages.
    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
    // Load proxy config
    const proxySetting = require(paths.appPackageJson).proxy;
    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
    // Serve webpack assets generated by the compiler over a web sever.
    const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
    );
    const devServer = new WebpackDevServer(compiler, serverConfig);
    // Launch WebpackDevServer.
    devServer.listen(port, HOST, err => {
      if (err) {
        return console.log(err);
      }
      if (isInteractive) {
        clearConsole();
      }
      console.log(chalk.cyan('Starting the development server...\n'));
      openBrowser(urls.localUrlForBrowser);
    });

    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
      process.on(sig, function() {
        devServer.close();
        process.exit();
      });
    });
  })
  .catch(err => {
    if (err && err.message) {
      console.log(err.message);
    }
    process.exit(1);
  });

Everything was working smoothly during the app's startup until I switched to babel7, you can find the details of this switch and relevant configuration files in another thread of mine:

Switching to babel 7 causes jest to show 'unexpected token'

I attempted updating the draftjs-md-converter to the most recent version, but unfortunately, it did not resolve the issue. I came across a discussion relating to this error in the following thread:

Identifier already declared - Identifier 'userScore' has already been declared

It is mentioned in that conversation that such an error might occur due to the app launching twice, although it remains unclear why this behavior started happening suddenly.

Answer №1

For those seeking the solution, it can be accessed at this location:

https://github.com/kadikraman/draftjs-md-converter/pull/56

The occurrence arises due to Babel 7 and draftjs-md-converter both defining the _toConsumableArray function. Consequently, a pull request was initiated on the original GitHub repository that utilized parcel bundling instead. The remedy entails the following steps:

git clone https://github.com/kadikraman/draftjs-md-converter.git
cd draftjs-md-converter
git checkout origin/chore/use-parcel-for-bundling
npm i
npm run compile

By copying the contents from the dist directory into node_modules/draftjs-md-converter/dist/, the issue is resolved.

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

Develop a program that retrieves necessary components, sets up, and launches a web browser

I am running an application with a node server and I want to achieve the following: npm start This should install both node dependencies and bower dependencies, and then open a browser window. Is it possible to do this without using gulp or grunt? Howe ...

The render function is not being executed due to a disruption in the code flow

Within the given code snippet, there is a peculiar issue with the render function being called inside the loop below. Strangely, the console.log statement before the function call executes successfully, but the one directly inside the function does not s ...

What are some ways to avoid sorting parameters in AngularJS when making a GET request using $resource?

My resource is: angular.module('myApp.services') .factory('MyResource', ['$resource', function ($resource) { return $resource('http://example.org', {}, {}); }]); How I send a GET request: MyResourc ...

Leveraging database functionality through sequelize

I'm a beginner in Express and I want to learn how to create a "Select *" query on a table. I know that I need to create a model of the table in a .js file and I have a good understanding of the next steps. However, my question is: How can I create a ...

What's preventing canvas from working offline but functioning properly on the TRYIT platform?

I have created some canvas-related code that works perfectly on TRYIT editor, but it fails to work locally when I copied the code into a file and tried to run it. This code is designed to take an image, set the width and height of a canvas based on that i ...

The Material UI Drawer is fading into the background instead of smoothly sliding into view

Seeking guidance as a novice in SD, I am dedicating my free time to honing my skills. Any advice is appreciated, but please explain it as if I were a child. My current endeavor involves making the Drawer Component feature functional and customizing it to s ...

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

Convert the mongoDB information into various collections and transfer it to a fresh server

Challenge: The goal is to synchronize MongoDB data between servers while also making some modifications to certain attributes before transferring. From Server 1 (DB) -> Transform data in collection -> To Server 2 (DB) Desired Outcome: On Server 1 ...

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Currently, I am utilizing a library named sinuous, which contains a submodule known as "sinuous/map". Interestingly, VSCode seems to lack knowledge about the type of 'map' when using import { map } from "sinuous/map", but it recognizes the type ...

How can the .pre() middleware function in Mongoose be utilized?

I'm curious about the use cases for mongoose .pre('validate') and .pre('save'). I understand their functionality, but I'm struggling to think of specific scenarios where I would need to utilize them. Can't all necessary a ...

A step-by-step guide on effectively swapping out every element in an array with its corresponding index location

After pondering over this question and conducting a search to see if it has been asked before, I couldn't quite find the answer due to difficulty in phrasing my inquiry. In case this question has already been addressed, I apologize for any duplication ...

Can a Jquery *compiler* be developed?

Upon encountering this informative question, the idea of creating a jQuery compiler crossed my mind. The concept was to design a tool that could translate jQuery code into raw JavaScript code for execution. In my imagination, the process of executing a bl ...

Hide modal once form has been successfully submitted

Is it best practice to pass handleClose into ForgotPasswordFormComponent in order to close the modal after form submission, or is there a better way to achieve this? <StyledModal open={openModal} onClose={handleClose} closeAfterTransition slots={{ bac ...

Exploring MongoDB through proxyquire

To simulate a MongoDB dependency using proxyquire in my testing scenario, I have the following code snippet: var proxyquire = require('proxyquire'); var controller = path.resolve('.path/to/controller/file.js'); inside the before each ...

Store the image URL in cache during AJAX loading

I have implemented an ajax slider to display images, and it is functioning perfectly. However, I am facing an issue with image caching. Since the images change dynamically using ajax, there is no cache available which causes a delay in displaying the new i ...

Encountering difficulties while attempting to transition from angular 9 to angular 10

I attempted to upgrade my Angular project by running the following commands: $ ng update @angular/core@9 @angular/cli@9 $ ng update @angular/core @angular/cli However, when I executed the last command in the console, it resulted in an error message: Your ...

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

Error: The AjaxMethod "Class" is not defined

I have an older asp.net project that utilizes Ajax.AjaxMethod() to invoke server-side code from Javascript. It used to function properly, but now it has suddenly ceased to work. Here is the C# code behind: public partial class Signup : System.Web.UI.Page ...

JQuery script fails to load in the head section while dynamically generating an HTML page with JavaScript

Using JavaScript, I have created a new window dynamically and added some HTML code to it. However, when I try to insert a script link into the HTML head, it fails to load when the window is open. <script type="text/javascript"> function newWindo ...