JavaScript dependencies being ignored/causing errors on Netlify deployment

Support
1

I have a project which I am deploying on Netlify. When it is run locally using two packages pako and nbitfy to parse some nbt data, it works perfectly, however on the deployed site, it causes the error:

Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))#

The site is linked below:

skyblock-profile-viewer.netlify.app

I don’t really understand everything to do with deployment and how the dependencies work, but I need this to obviously work both locally and on the deployed site. I haven’t taken any debugging steps and I don’t really understand what the issue is or how to resolve it - I understand netlify ignores node_modules but should do a build itself from package.json but the error still persists?

GitHub - GitHub - dalton-f/skyblock-profile-viewer

Code:

/* eslint-disable camelcase */

import * as NBT from "nbtify";

import pako from "pako";

document.addEventListener("DOMContentLoaded", async () => {
  const data = await fetch(
    `/.netlify/functions/fetchProfilesByUUID?uuid=666bb608-c287-4b47-aa1c-e775690cba66`,
  );

  const { profiles } = await data.json();

  let selectedProfile;

  // The selected profile is not always at the 0th index, so search for it
  for (const profile of profiles)
    if (profile.selected) selectedProfile = profile.members;

  // Note - the key is always the condensed version of the UUID (no dashes)
  for (const [key, value] of Object.entries(selectedProfile)) {
    if (key === "666bb608c2874b47aa1ce775690cba66") selectedProfile = value;
  }

  // At this point we have usable data
  const { rift } = selectedProfile;

  const { inventory } = selectedProfile;
  const { bag_contents } = inventory;
  const { talisman_bag } = bag_contents;

  const test = talisman_bag.data;

  const binaryString = atob(test);

  // 2. Convert binary string to Uint8Array
  const uint8Array = new Uint8Array(binaryString.length);

  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }

  // 3. Gzip decompress
  const decompressedData = pako.ungzip(uint8Array, { to: "Uint8Array" });

  // 4. Convert decompressed data to ArrayBuffer
  const nbtBuffer = decompressedData.buffer;

  // 5. NBT parse
  const nbtData = await NBT.read(nbtBuffer);

  console.log(nbtData);

  console.log(rift);
});
2

@Dalton As far as I can tell from a quick glance, this is unrelated to Netlify.

It’s probably just related to this:

const data = await fetch(
  `/.netlify/functions/fetchProfilesByUUID?uuid=666bb608-c287-4b47-aa1c-e775690cba66`,
);

const { profiles } = await data.json();

let selectedProfile;

// The selected profile is not always at the 0th index, so search for it
for (const profile of profiles)

The return for that fetch is the same as seen when directly navigating there:
https://skyblock-profile-viewer.netlify.app/.netlify/functions/fetchProfilesByUUID?uuid=666bb608-c287-4b47-aa1c-e775690cba66

image
image1195×250 63.3 KB

Your code has no handling for the occurrence of that error message.

It simply destructures out profiles and continues along.

As profiles doesn’t exist the value will be undefined.

The subsequent for loop will evaluate as for(const profile of undefined)

Which matches the error you’re seeing:

Uncaught (in promise) TypeError: undefined is not iterable (cannot read property
3

Oh, this is very strange - thank you for identifying the real cause of the error @nathanmartin. I guess this is a good reason to add some better error handling - but this still begs the question as to why it works locally and not on the deployment? The api key is valid and I know that for a fact, so is there something to do with Netlify and environment variables thats going wrong here?

For reference, fetch profiles just uses dotenv to grab the api key and use it for the actual endpoint, masked behind the function

4

This is probably ultimately due to them not being precisely the same.
Any difference could yield a different outcome, and they’re entirely different environments.

The applicable documentation is here:
https://docs.netlify.com/functions/environment-variables/

I can’t provide more detailed guidance since I don’t work with it myself.

If I were debugging my first step would probably be to just confirm the API key is accessible & correct at the point that it’s accessed in the code.