Module parse failed: Identifier 'e' has already been declared

[naveenanne]

I'm building a reusable component. The component uses @arcgis/core along with other ui. 

I'm able to install and use my library in any react application, when I try to build the react app I'm getting the below error.

./node_modules/@jlibrary/mapbuildtest/dist/index-fc2c8712.js 69378:9
Module parse failed: Identifier 'e' has already been declared (69378:9)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| 
> for (var e = 48; e < 58; e++) {
|   L0[e] = String.fromCharCode(e);
| }

[AndyGup]

@naveenanne This looks like an issue with one of your other libraries, the file path listed in the error message isn't coming from the ArcGIS API for JavaScript. 

[naveenanneufl]

In my library, I just have one component

MapTest.js

import React, { useRef, useEffect } from "react";
import MapView from "@arcgis/core/views/MapView";
import Map from "@arcgis/core/Map";

function MapTest() {
    const _mapDiv = useRef(null);
    useEffect(() => {
        if (_mapDiv.current) {
            const _view = new MapView({
                container: _mapDiv.current,
                map: new Map({
                    basemap: "topo-vector"
                })
            });
        }
    }, []);

    return <div className="mapDiv" ref={_mapDiv}></div>;
}

export default MapTest;

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

const devEnvironmentPlugins = [
  external(),
  postcss({ plugins: [], minimize: true }),
  babel({ exclude: "node_modules/**", presets: ["@babel/preset-react"] }),
  external(),
  resolve(),
  commonjs(),
  terser(),
];

const config = [
  {
    input: "src/index.js",
    output: [
      {
        dir: "dist/js",
        format: "cjs",
        sourcemap: true,
      },
    ],
    plugins: devEnvironmentPlugins,
    external: ["react", "react-dom", "prop-types", "styled-components"],
  },
  {
    input: "src/index.js",
    output: [
      {
        dir: "dist/js",
        format: "es",
        sourcemap: true,
      },
    ],
    plugins: devEnvironmentPlugins,
    external: ["react", "react-dom", "prop-types", "styled-components"],
  },
];

export default config;

In my react application I'm consuming the library

import React from "react";
import { MapTest } from "@dltest/mapbuildtest";
import "./App.css";

function App() {
  return <div id="root"><MapTest /></div>;
}

export default App;

The error that comes is

./node_modules/@dltest/mapbuildtest/dist/index-0ae0a047.js 64268:9
Module parse failed: Identifier 'e' has already been declared (64268:9)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| 
> for (var e = 48; e < 58; e++) {
|   qJ[e] = String.fromCharCode(e);
| }

[AndyGup · Accepted solution]

Okay, thanks. Taking another look at those two error messages, this seems to be a ES6-to-ES5 transpilation error. That's typically a configuration issue with your framework/bundler and not an issue with the ArcGIS JS API.

I'm basing my guess on one instance of a similar code signature that is in my local install  /node_modules/@arcgis/core/views/input/keys.js. I've installed @arcgis/core@4.22. and that module is using ES6+ syntax.

for(let s=48;s<58;s++)o[s]=String.fromCharCode(s);

Try building your component using our example as a base and let us know if that works? https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app

[naveenanneufl]

The below browserlist config within consuming application solved the build issues. I'll confirm in a while after deployment is successful.  

"browserslist": {
    "production": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },