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'
}
}
]
}
};
