Identifier '_toConsumableArray' has already been declared

Question

I am experiencing such an issue when starting my Redux app:

./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>)

The startup script is the following:

'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);
  });

The startup of the app was working just fine until I switched to babel7, the process of which (and relevant config files) can be found in my other thread:

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

I tried updating draftjs-md-converter to the latest version but it did not fix the issue. I found in this thread:

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

That such an error may be happening because the app is somehow launched twice, but not sure why it started to do so right now.

Answer 1

The solution can be found here:

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

It happens because both Babel 7 and draftjs-md-converter define _toConsumableArray function. So, the pull request was issues on the actual github page where it was built with parcel instead and the solution is the following:

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

After that copying the files from the dist folder into node_modules/draftjs-md-converter/dist/ one solved the issue.