nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

AndyGup

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

All comments

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"
    ]
  },

AndyGup

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

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

@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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.