Latest Contributions by ReneRubalcava

There's also examples on github https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-react https://github.com/Esri/arcgis-maps-sdk-javascript-samples-beta/tree/main/packages/map-components/templates/react Also a number of videos from previous DevSummits https://mediaspace.esri.com/esearch/search?keyword=react ... View more

That error looks like you don't have an arcgis-sketch element on the page. If you provide a repro per the doc, could tell better. https://developers.arcgis.com/javascript/latest/troubleshooting/#minimal-reproducible-application ... View more

This works in "next", but we made some changes to the event names. https://codepen.io/odoe/pen/yLrbBoR?editors=0011 Event names no longer include the name of the component and they are all prefixed with 'arcgis' in the names. We'll get that added to the breaking changes here. https://github.com/Esri/feedback-js-api-next/blob/main/CHANGELOG.md#components-breaking-changes ... View more

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. ... View more

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. ... View more

Pushed a fix for that this week, and it went into the "next" version recently. Glad you got the fix. ... View more

Please provide a GitHub repo, stackblitz, or codesandbox that reproduces the issue. Don't know the version of JS SDK or webpack, so that will help. Could be a webpack config issue or how things are loading, but no way to tell. ... View more

Please provide a github repo, stackblitz, or codesandbox that reproduces this issue. As Sam pointed out, no way to pinpoint the problem without it. ... View more

The two CDNs are different. The AMD CDN can be used in production apps. We do recommend using ESM with arcgis/core npm package, but the AMD CDN is still viable for lots of folks. The ESM CDN is available for testing purposes, it's not optimized and will a lot of files. There is an option for the AMD CDN to use a Promise based import, using $arcgis.import. There will be better doc on this with 4.30, but it's mentioned here. https://developers.arcgis.com/javascript/latest/components-programming-patterns/#using-a-proxy Ideally, if you want other users to use this component, that's why I suggested that the web component module not import any maps sdk modules on it's own. You can't mix AMD and ESM CDN. Complex objects and classes can only be set via JS on web components, so you wouldn't be able to have an only HTML solution, you'd need some JS to set props. Attributes can only be strings/numbers/booleans. ... View more

This is cool! I put it into a codepen, just to see how it felt going through the code. Nice work! https://codepen.io/odoe/pen/bGJMJpV This actually looks really good. If I were to do anything different, I might apply the css to your button via an embedded style tag in the shadow dom, but that is just a minor comment. This is a useful pattern to write some web comps that you can still pass to the view ui. If you want to keep this pattern, I would suggest using the AMD CDN, simply for perf purposes. You may also want to pass the class for GraphicsLayer to the component so that it's completely encapsulated, and the component doesn't reference any JS SDK modules directly, if that makes sense. This way it would work for quick apps that you test with the ESM CDN or when you use the AMD CDN. Here is what I meant by encapsulating the JS SDK classes, this way the component is a little more portable. https://codepen.io/odoe/pen/BaExgYb?editors=0010 ... View more

It would be the same thing minus the application part. You can expose the view or map on your components for users. You could even build a thin API of methods on your components to handle custom tasks, like zoom to graphics or turn layers on/off. You would probably want to use a build tool like Vite to bundle your components. With Vite you can set the maps sdk as an external dependency. I forget if it's directly in Vite config or as part of the rollup plugin part. But you don't want the maps sdk in your bundles, let the app do that. There is also an option to use any of the web component compilers/frameworks out there like Stencil or Lit, even Svelte can compile to WC. ... View more