topic Re: Module parse failed: Identifier 'e' has already been declared in ArcGIS JavaScript Maps SDK Questions

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

naveenanne — Thu, 16 Dec 2021 07:56:47 GMT

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

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

AndyGup — Thu, 16 Dec 2021 15:44:26 GMT

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

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

naveenanneufl — Thu, 16 Dec 2021 18:27:39 GMT

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

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

AndyGup — Thu, 16 Dec 2021 20:20:23 GMT

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

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

naveenanneufl — Thu, 16 Dec 2021 21:50:46 GMT

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