Uncaught TypeError: Invalid value used as weak map key

Hi Brian,

I was surprised that a crank app suddenly failed with a new Shopify theme. Removing the theme javascript solved the problem but of course is not the solution. The app is compiled with Vite and minified. Resulting in a show stopping error and the app not rendering:

boxesapp.js?v=160012563599259014851659593001:1 Uncaught (in promise) TypeError: c.then is not a function
    at Ot (boxesapp.js?v=160012563599259014851659593001:1:5435)
    at _e (boxesapp.js?v=160012563599259014851659593001:1:3873)
    at Ot (boxesapp.js?v=160012563599259014851659593001:1:5373)
    at _e (boxesapp.js?v=160012563599259014851659593001:1:3873)
    at oe (boxesapp.js?v=160012563599259014851659593001:1:9132)
    at boxesapp.js?v=160012563599259014851659593001:1:11469
    at async Promise.all (index 0)
    at async Object.fn [as init] (boxesapp.js?v=160012563599259014851659593001:7:10767)

Recompiling and disabling minify; the app will load correctly but with errors in the inspector:

Uncaught TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at addEventListener (boxesapp.js?v=181202394000030643281659593075:993:20)
    at Function.bindReady (jquery.min.js:2:9844)
    at init.ready (jquery.min.js:2:8340)
    at new init (jquery.min.js:2:7732)
    at e (jquery.min.js:2:6172)
    at jquery.min.js:2:19170
    at jquery.min.js:2:21280
    at jquery.min.js:4:29596

Which in boxesapp is at:

const listenersMap = /* @__PURE__ */ new WeakMap();
function addEventListener(ctx, type, listener, options) {
  let listeners;
  if (listener == null) {
    return;
  } else {
    const listeners1 = listenersMap.get(ctx);
    if (listeners1) {
      listeners = listeners1;
    } else {
      listeners = [];
      listenersMap.set(ctx, listeners); // * error here
    }
  }

So I’m wondering if crank can catch this error and fail silently if this is appropriate? Or am I barking at the wrong tree? I only post this here because it seems to me that this will pop up for others when jQuery is present.

I did spend quite a bit of time trying to adjust my code to eliminate the error but without success. I defer to better minds than my own.

Kind regards, Darryl Cousins

[darrylcousins]

Hi Brian,

Thanks for your reply. I have installed the fix-eventtarget-errors branch and the problem is fixed. Unminified passes without errors as does the minified bundle.

Your summary of the problem is how I see it too. I think you can close this.

Many thanks. Darryl Cousins

[darrylcousins]

Hi Brian,

Thanks for your prompt and detailed reply. I’ve done some more digging. I built a small app into which I loaded as much of the javascript from the shopify theme as I could find in there (there’s a lot!). But I couldn’t reproduce the problem.

As a further note I’m using the same theme on another development shop without any problems although it should have all the same code (thought by definition clearly does not). Shopify is an environment of plugins and apps so all sorts of code is running.

I dropped a console call in the crank code:

const listenersMap = /* @__PURE__ */ new WeakMap();
function addEventListener(ctx, type, listener, options) {
  console.log(ctx, listener);  //                             <---- here
  let listeners;
  if (listener == null) {
    return;
  } else {
    const listeners1 = listenersMap.get(ctx);

Noting that an error is only thrown when listener === false (see screenshot below) I tried checking for that by:

const listenersMap = /* @__PURE__ */ new WeakMap();
function addEventListener(ctx, type, listener, options) {
  console.log(ctx, listener);
  let listeners;
  if (listener == null || !Boolean(listener)) {   //  <---- here
    return;
  } else {
    const listeners1 = listenersMap.get(ctx);

And the error went away. I obviously don’t know of any side effects that this may cause to crank, I leave that with you.

Just some thoughts.

Yours sincerely, Darryl Cousins