How to fix ChunkLoadError when using ES Modules with JavaScript SDK

BradBarnell — Tue, 26 Sep 2023 17:10:48 GMT

When I try to use ES modules with the JavaScript SDK in a Node.js project, I get lots of the following error. If I use the CommonJS module system everything works fine. My configuration files are show below. How do I fix this problem?

Unable to create map view. ChunkLoadError: Loading chunk vendors-node_modules_arcgis_core_views_navigation_PanPlanarMomentumEstimator_js-node_modules_-6bde0d failed.

tsconfig.json:
{
"compilerOptions": {
"module": "ES2020",
"moduleResolution": "Bundler",
"target": "ES2020",
"sourceMap": true,
"esModuleInterop": true,
"noEmitOnError": true,
"jsx": "react",
"skipLibCheck": true
},
"exclude": [
"node_modules",
]
}

package.json:
{
"name": "test_sdk",
"type": "module",
"version": "0.0.0",
"description": "Test",
"main": "index.js",
"devDependencies": {
"@arcgis/core": "^4.27.6",
"@auth0/auth0-spa-js": "^2.1.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@material-ui/types": "^5.1.0",
"@mui/material": "^5.13.6",
"@types/node": "^14.18.53",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"express": "^4.18.2",
"path": "^0.12.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"ts-loader": "^9.4.4",
"typescript": "^5.1.6",
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4",
"webpack-node-externals": "^3.0.0"
},
"scripts": {
"build": "webpack-cli --config webpack.config.js",
}
}

webpack.config.js:
export default {
target: "web",
entry: "./Default.ts",
mode: "development",
devtool: "source-map",
output: {
filename: "./app-bundle.js",
devtoolModuleFilenameTemplate: '[resource-path]'
},
resolve: {
extensions: ['.ts', '.js', '.jsx', '.tsx']
},
module: {
rules: [
{
test: /\.tsx$|ts/,
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
}
]
}
};

Re: How to fix ChunkLoadError when using ES Modules with JavaScript SDK

ReneRubalcava — Tue, 26 Sep 2023 17:42:16 GMT

Tough to tell from snippets. Try to compare against samples in here, there is a webpack sample too

https://github.com/Esri/jsapi-resources/tree/main/esm-samples

topic How to fix ChunkLoadError when using ES Modules with JavaScript SDK in ArcGIS JavaScript Maps SDK Questions

How to fix ChunkLoadError when using ES Modules with JavaScript SDK

Re: How to fix ChunkLoadError when using ES Modules with JavaScript SDK