@arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Anonymous User — Thu, 18 Mar 2021 10:17:52 GMT

My intention is to use ArcGis API in a Next JS application.

I have used `create next app` to create a simple Next JS application.

For this exercise, I used the React sample for reference https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app

I ran `postinstall` and copied all the assets into the `./public/asset` folder.

I copied the codes in `App.js` from the sample into a script called `map.js` in the `pages` folder. Therefore the exported React component (ArcGisMap) should be viewable at localhost:3000/map in my local dev environment.

I copied the styles from `App.css` from the sample to my `globals.css`

However, I faced this error while loading that page.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/ming/arcgis-next/my-app/node_modules/@arcgis/core/layers/FeatureLayer.js

require() of ES modules is not supported.

require() of /Users/ming/arcgis-next/my-app/node_modules/@arcgis/core/layers/FeatureLayer.js from /Users/ming/arcgis-next/my-app/.next/server/pages/map.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.

Instead rename FeatureLayer.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ming/arcgis-next/my-app/node_modules/@arcgis/core/package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)

at Module.load (internal/modules/cjs/loader.js:928:32)

at Function.Module._load (internal/modules/cjs/loader.js:769:14)

at Module.require (internal/modules/cjs/loader.js:952:19)

at require (internal/modules/cjs/helpers.js:88:18)

at eval (webpack-internal:///@arcgis/core/layers/FeatureLayer:1:18)

at Object.@arcgis/core/layers/FeatureLayer (/Users/ming/arcgis-next/my-app/.next/server/pages/map.js:137:1)

at __webpack_require__ (/Users/ming/arcgis-next/my-app/.next/server/pages/map.js:23:31)

at eval (webpack-internal:///./pages/map.js:6:90)

at Module../pages/map.js (/Users/ming/arcgis-next/my-app/.next/server/pages/map.js:104:1)

at __webpack_require__ (/Users/ming/arcgis-next/my-app/.next/server/pages/map.js:23:31)

at /Users/ming/arcgis-next/my-app/.next/server/pages/map.js:91:18

at Object.<anonymous> (/Users/ming/arcgis-next/my-app/.next/server/pages/map.js:94:10)

at Module._compile (internal/modules/cjs/loader.js:1063:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

at Module.load (internal/modules/cjs/loader.js:928:32) {

code: 'ERR_REQUIRE_ESM'

Re: @arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Anonymous User — Thu, 18 Mar 2021 12:36:38 GMT

Solved. https://github.com/benelan/arcgis-esm-samples

topic Re: @arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module in ArcGIS JavaScript Maps SDK Questions

@arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Re: @arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module