@arcgis/core with Next JS Error [ERR_REQUIRE_ESM]: Must use import to load ES Module
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'
}`
`
Accepted Solutions