Editor Widget throwing "Uncaught TypeError: Cannot destructure property 'objectIdField'"

[LukeCalladine]

Hey all,

Another brick wall appears in front of me so soon since my first one! 

I've managed to translate all my code into ES6 using ViteJS which solved my module bundler issues that we're causing my last problem.

However I've now run into a issue when using the EditorWidget within my web map application(which worked when using CDN).

I'm loading the Editor Widget with the following simple code:

let editor = new Editor({
        view: mapview
    })
mapview.ui.add(editor, {
        position: "top-right"
    });

The Widget is able to load and provides me with the normal Widget Panel (I've done no changes to the Widget itself, I'm just literally calling the Widget for the single layer from my local Portal).

I'm able to Edit via the Widget and Save/Apply the edits successfully - the issue occurs when I try and Insert a new feature where I get the following error: 

Uncaught TypeError: Cannot destructure property 'objectIdField' of 't15' as it is null.
at p10._getLabel (@arcgis_core_widgets_Editor.js?v=fd72f127:3971)

The insert does commit and is saved to the Portal correctly, but the above error causes the Widget to freeze and nothing else can be done.

I fear this is likely beyond my comprehension as its within the Widget - but I also wonder if its the module bundler doing something? As I mentioned in my last post - I have no real experience with module bundlers. After attempting to naively work out where the error may be coming from - I've had a look in the corresponding file that I think the error is generated from (WorkFlow.js)? But I'm not too sure!

Be disappointing if the app gets to the literal final hurdle and dies!

I'm not really sure what else I can share but here is my package.json file if it helps:

{
  "name": "small-map-editor",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.6.4"
  },
  "dependencies": {
    "@arcgis/core": "^4.21.2",
    "jquery": "^3.6.0"
  }
}

Any chance someone could put me out of my misery again?

[LukeCalladine]

Small update yet potentially glorious (ended up being shortlived...).

I've just tried building out the application instead of running it via 'npm run dev'.

When serving the built version I no longer experience the error. Not sure why that would be the case.

EDIT : Getting slightly more bizarre. I have two computers. Computer 2 is the host PC.

Computer 1 - dev - Editor Widget errors with the initial error above.
Computer 1 - build - Editor Widget errors with "Uncaught TypeError: Cannot destructure property 'objectIdField' of 't' as it is null." similar to initial dev error.

Computer 2 (host) - dev - Editor Widget errors with the initial error above.
Computer 2 (host) - build - Editor Widget works, no issues at all.

[LukeCalladine]

This is where its erroring apparently at the {objectIdField: i} = t line:

_getLabel(e) {
const t = e.layer
, {objectIdField: i} = t
, {attributes: r} = e
, n = bR(t);
return n && r[n] && `${r[n]}` || Kr(this.messages.untitledFeatureTemplate, {
id: r[i]
})
}

[ReneRubalcava]

Not sure exactly what your app looks like, but I put together a simple app with vite and the Editor.

https://github.com/odoe/vite-jsapi-editor

Maybe this can help

[LukeCalladine]

Hey Rene,

Thanks for your response and sorry for my late reply, I was on vacation - I've cloned your repository and all works well as I expected it would!

I've done a bit more troubleshooting and I think the issue is potentially a Portal / Layer on Portal issue or the interaction between the API and our Portals?

If I copy the layer that you've used from the CodePen example on the Samples section of the JS API site using the "Create feature layer from URL" in two different internal portals (one is 10.7.1, the other is 10.9) - the copied layer works correctly in every Vite/Node environment (run dev, run serve, http-server) I've tried.

It seems the error occurs on layers which are either, manually created on either Portals or manually uploaded from SHP/GDB to the Portals, or even published to Portal via ArcMap/Pro - if the layer is duplicated FROM AGOL to the Portals it works.

Interestingly, if I duplicate the layers which error from the Portals to AGOL, the layers work correctly also.

Is layer creation that different on AGOL vs Portals 10.7.1 or 10.9?

[LukeCalladine]

Continued troubleshooting, definitely seems an issue between the communication of the Application API and both of our Portals.

As in my other reply - if I load the layer that you use in your Github example (or any layer on AGOL it seems) it works as intended.

If I load a local copy of the layer you use (i.e. save it to either Portal and load from there - I'm able to make edit records correctly, I'm also able to insert records correctly BUT I'm unable to start inserting a record and then back out of the process with it once again giving me the same objectIdField of 't' error.

Any other local layer, on either Portal, is able to be edited - but I'm unable to insert or insert and then back out of the process without the above objectIdField of 't' error occurring.

I've attached my code, but I'm not sure how much help it will be since the error occurs both in your example (using my layers) and also my code (with my layers).

Are the Portals too far in version behind AGOL? I thought 10.9 was the latest portal version? Are the functionalities not compatible? Or is it ViteJS that's packaging incorrectly (can it even do that? Why would it package correctly for AGOL items but not Portal Items?)

[LukeCalladine · Accepted solution]

Bit of extra troubleshooting, I think its a ViteJS bundling issue. I don't have the knowledge or experience to be authoritative with that statement though!

I've managed to build my application using WebPack instead and it is now seems to be functioning as desired.

Glad I was able to bodge it to the next step!

[HeatherGonzago]

 Hi @LukeCalladine this is a bug that only appears to happen when using ESM. We just recently noticed this in another workflow.

Could you try adding this bit of code into your app to see if you still experience this issue?

// temp workaround
const origGetLabel = Editor.prototype._getLabel;
Editor.prototype._getLabel = function(feature) {
  if (!feature.layer) {
    return null;
  }
  return origGetLabel.call(this, feature);
};

[LukeCalladine]

Hey Heather,

Thanks for the update, I've actually transitioned my project to Webpack now so can't test the code right now.

I'm creating a new ViteJS app now, so if I run into the same problem I will apply this solution and see if it works,

Luke