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

1872
1
Jump to solution
03-18-2021 03:17 AM
by Anonymous User
Not applicable

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'

}`

 

Zhen-MingNgNg_0-1616062335282.png

`

0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable
0 Kudos
1 Reply
by Anonymous User
Not applicable
0 Kudos