Illegal constructor error on calcite components loading on the map using JS Maps SDK

Question

We have used the Maps SDK for JavaScript to create a map app using the ArcGIS Webpack plugin. We are not copying the assets locally. We are using some of the widget in the map app, like the sketch tool which mainly surfaced this issue it does not display on the screen.

When we load the map viewer component, it throws an Uncaught Type error: Illegal constructor for the Calcite components.
When reading through documentation it does not explicitly specify that the calcite-components need to be imported for the sketch tool. However following the documentation for Calcite Design System in ArcGIS Developer doc it mentions that we need to invoke defineCustomElements function from the @esri/calcite-components.
With this update we see a different error but it still does not load the sketch tool. 
Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "calcite-icon" has already been used with this registry.

When using library directly from the CDN the app works as expected the sketch tool loads.

I would highly appreciate help on this if anyone has faced this issue, or has any advice or recommendation.

SkectchToolDisplayIssue.png

IllegalConstructorError.png

CustomElDefTwiceError.png

RRubalcava · Answer

You already have arcgis/core in your package.json, you don't need the webpack plugin or calcite there. The arcgis-plugin does nothing except help copy assets, but you turned that off and you do it manually in your webpack config.

As I mentioned, it is probably installing an older version of arcgis/core and calcite and other deps as well and that might be causing some issues.

"dependencies": {
    // keep this
    "@arcgis/core": "^4.28.10",
    // remove, probably installs old version
    "@arcgis/webpack-plugin": "^4.22.0", 
    // remove, overrides the arcgis/core dependency
    // can't guarantee things won't break when you do this
    "@esri/calcite-components": "^2.1.0"
}

As far as your webpack config goes, I would just remove use the arcgis plugin.

const path = require('path');

const miniCssExtractPlugin = require('mini-css-extract-plugin');
const copyPlugin = require('copy-webpack-plugin');

/* creates static resource xml file in ./force-app/main/default/staticresources directory */
const staticResourceCreate = require('static-resource-webpack-plugin');

const staticResourcePath = path.resolve('./claritiGIS/main/default/staticresources');
const ignoreTemplate = path.resolve('./arcGISApp/git-ignore-template.txt');

module.exports = (_, args) => {
    const mode = args.mode;

const config = {
        mode,
        entry: {
            index: ['./arcGISApp/index.js', './arcGISApp/index.css']
        },
        node: false,
        output: {
            chunkFilename: 'chunks/bundle_[name].js',
            path: staticResourcePath + '/ArcGISSDK',
            assetModuleFilename: 'assets/[hash][ext][query]'
        },
        optimization: {
            mergeDuplicateChunks: true
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /nodeModules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.css$/,
                    use: [miniCssExtractPlugin.loader, 'css-loader']
                }
            ]
        },
        plugins: [
            new staticResourceCreate({
                staticResPath: staticResourcePath
            }),

new copyPlugin({
                patterns: [
                    {
                        from: '**',
                        context: 'node_modules/@esri/calcite-components/dist/calcite/assets/',
                        to: staticResourcePath + '/CalciteAssets/assets/'
                    },
                    {
                        from: ignoreTemplate,
                        to: `${staticResourcePath}/ArcGISSDK/.gitignore`,
                        toType: 'template'
                    },
                    {
                        from: ignoreTemplate,
                        to: `${staticResourcePath}/CalciteAssets/.gitignore`,
                        toType: 'template'
                    }
                ]
            }),

new miniCssExtractPlugin({
                filename: '[name].css',
                chunkFilename: 'arcgis_[name].css'
            })
        ]
    };

return config;
};

On another note, although you can usually install newer versions of calcite than what is defined in the arcgis/core package.json, it doesn't guarantee that it won't break things. You usually do not need to specify a calcite version when installing arcgis/core, the package manager will install the one it expects to use.

AmritaPatra · Answer

Can you share what should I be using in the webpack.config.js and package.json? I need to use the latest SDK or when I created this I was supposed to used 4.28.x. I want to be able package up the esm modules, without the assets. 
The reason is that we need to load the ArcGIS JS SDK into salesforce as <5MB zip so that we can reference the library. We cannot directly reference the CDN.
I would highly appreciate your advice on how we can achieve the above.

RRubalcava · Answer

Sorry for late response. I couldn't build with your gist, but you don't need the arcgis webpack plugin anymore, it's deprecated. It was made for the old amd modules originally and it really was only useful for esm builds to copy assets, but you disabled that, so it wasn't doing anything. It does have a dep on an old version of the SDK though, which might be causing an issue for you.