1

I am following a tutorial in which the following line works:

['hashchange', 'load'].forEach(ev => console.log(ev));

I write it and I get:

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at Object.eval (eval at hmrApply (runtime-378176c723eb17dd.js:297), <anonymous>:143:12)
    at newRequire (index.05cf099e.js:71)
    at hmrAcceptRun (runtime-378176c723eb17dd.js:370)
    at WebSocket.ws.onmessage (runtime-378176c723eb17dd.js:127)

The project is using Parcel: parcel index.html.
It also imports core-js/stable and regenerator-runtime/runtime.

If I create a variable holding the array and then call forEach() on that array it works:

const arr = ['hashchange', 'load'];
arr.forEach(ev => console.log(ev));

at Object.eval (eval at hmrApply (runtime-378176c723eb17dd.js:297), :143:12):

function hmrApply(bundle
/*: ParcelRequire */
, asset
/*:  HMRAsset */
) {
  var modules = bundle.modules;

  if (!modules) {
    return;
  }

  if (asset.type === 'css') {
    reloadCSS();
  } else if (asset.type === 'js') {
    var deps = asset.depsByBundle[bundle.HMR_BUNDLE_ID];

    if (deps) {
   var fn = new Function('require', 'module', 'exports', asset.output); // line 297
      modules[asset.id] = [fn, deps];
    } else if (bundle.parent) {
      hmrApply(bundle.parent, asset);
    }
  }
}

at newRequire (index.05cf099e.js:71):

  function newRequire(name, jumped) {

// a big function

      var module = (cache[name] = new newRequire.Module(name));

   modules[name][0].call( // line 71
        module.exports,
        localRequire,
        module,
        module.exports,
        this
      );
    }

at hmrAcceptRun (runtime-378176c723eb17dd.js:370):

function hmrAcceptRun(bundle
/*: ParcelRequire */
, id
/*: string */
) {
// a big function
  bundle(id); // line 370
  cached = bundle.cache[id];

at WebSocket.ws.onmessage (runtime-378176c723eb17dd.js:127)

  ws.onmessage = function (event
  /*: {data: string, ...} */
  ) {
// a big function
          if (!acceptedAssets[id]) {
            hmrAcceptRun(assetsToAccept[i][0], id); // line 127
          }
}
Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
George Sloata
  • 135
  • 1
  • 2
  • 12
  • If the above snippet throws _“Uncaught `TypeError`: Cannot read properties of `undefined` (reading '`forEach`')”_, then `['hashchange', 'load'].forEach(ev => console.log(ev));` is definitely not the full statement. `['hashchange', 'load']` is a property access of whatever expression came before that. Look at the line before this one. Does it lack a semicolon? This has nothing to do with Parcel. – Sebastian Simon Nov 30 '21 at 20:09
  • Before `['hashchange', 'load']` there is a function block that has nothing to do with `['hashchange', 'load'].forEach(ev => console.log(ev));`. I added the semicolon and it worked. I thought that you don't need semicolons in JavaScript... What is happening here ? – George Sloata Nov 30 '21 at 21:22
  • Also, why was my question marked as a duplicate and closed ? How can a beginner like me know what `automatic semicolon insertion (ASI)? ` is ? There is not even a clue in the error regarding a semicolon. How could I possibly know about this if I am just now learning Javascript ? I think this is unfair. – George Sloata Nov 30 '21 at 21:23
  • 1
    Why is this unfair? You got your answer, right? Everything is explained in the linked post. Duplicate questions aren’t inherently bad. – Sebastian Simon Nov 30 '21 at 21:25

0 Answers0