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);
| }
Solved! Go to 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
@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.
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);
| }
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
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"
]
},