How to Load a Custom Widget using @arcgis/core

[BenRomlein]

I'm using 4.20 api in my app with @arcgis/core. I have a custom layer manager widget I want to load and I've been using this method from the custom widget documentation, but it doesn't seem to work with ES modules. I have in my index:

<script>
  var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
  window.dojoConfig = {
    packages: [
      {
        name: "layer-manager",
        location: locationPath + "./Widgets/LayerManager/app"
      }
    ]
  };
</script>
<script type="module" src="./app/main.js"></script>
...
<script>require(["layer-manager"]);</script>

 then in my main.ts file I do:

import LayerManager = require("layer-manager/LayerManager");

 I'm trying to use snowpack in dev mode to bundle and serve my code locally, but I'm getting the error:

 Uncaught ReferenceError: require is not defined

 from those lines in index and main.

I see the note in the docs that says:

 Although Dojo has been removed from a majority of the API, it is still needed in this case to load the AMD modules.

I'm guessing none of my code is pulling in dojo, so it doesn't have access to require. I tried adding a script tag to my index.html:

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js"></script>

but that gives me this error:

dojo.js.uncompressed.js:129 Uncaught Error: undefinedModule

I also see here https://developers.arcgis.com/javascript/latest/tooling-intro/#compare-amd-and-es-modules that esm local builds might not even be possible when using dojo1.

What is the recommended way for loading custom widgets and is it possible to load custom widgets using the ES modules and a bundler like snowpack?

[AndyGup]

@BenRomlein A few things come to mind. You don't need a 3rd party module loader, such as dojo, when using ES modules. Also, JavaScript build tools need to be specially configured to interpret AMD or commonJS. Most implementations follow the ESM pattern: import xyz from "/mymodule/module";

Here's a link to a slightly older unofficial sample app that demonstrates using a custom widget with ES modules + TypeScript. https://github.com/kellyhutchins/arcgis-core-demo-app .

And last, we do not currently recommend using the ArcGIS API for JavaScript ES modules with snowpack, for reference see this open issue: https://github.com/Esri/jsapi-resources/issues/299.  We do have a bunch of other build-tool samples to choose from, in the event you are able to switch away from snowpack: https://github.com/Esri/jsapi-resources/tree/master/esm-samples. 

[BenRomlein]

@AndyGup Thank you for the reply and advice. After reviewing Kelly's repo of the demo app I've gotten my code to compile and run on the snowpack dev server.

I'm getting a few errors that I don't understand the cause of:

My widget is now giving the error: 

Uncaught (in promise) ReferenceError: React is not defined

It's coming from my widet's compiled .js file in the render method: 

  render() {
    if (!this.openGroup) {
      return /* @__PURE__ */ React.createElement("div", {
        class: CSS.root
      }, this.renderGroups());

//in TSX:

  render() {
    if (!this.openGroup) {
      return (<div class={CSS.root}>
         {this.renderGroups()}
         </div>);
    }

and when I run npx tsc I get two errors:

[16:18:16] [@snowpack/plugin-typescript] node_modules/@types/eslint/index.d.ts(451,42): error TS2724: '".../node_modules/@types/estree/index"' has no exported member named 'ChainExpression'. Did you mean 'ThisExpression'?
[16:18:16] [@snowpack/plugin-typescript] node_modules/@types/eslint/index.d.ts(474,43): error TS2694: Namespace '".../node_modules/@types/estree/index"' has no exported member 'ImportExpression'.

I was previously able to resolve these tsc compile errors by removing package-lock.json and node_modules and re-running npm install, but that hasn't worked this time.

Any idea what I need to do?

Thank you again for your advice, I will try to transition to webpack. Snowpack's minimal config requirements are very attractive, I wanted at least to try it out.