AbortController is not a constructor

[jon890]

I don't know resolving this problem.
Maybe webpack bug..?
I'm using

    "@metaplex-foundation/js": "^0.11.0",
    "@solana/wallet-adapter-base": "^0.9.5",
    "@solana/wallet-adapter-react": "^0.15.5",
    "@solana/wallet-adapter-react-ui": "^0.9.7",
    "@solana/wallet-adapter-wallets": "^0.16.1",
    "@solana/web3.js": "^1.44.0",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"

Here is my code

import { Metaplex, Nft } from "@metaplex-foundation/js";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { PublicKey } from "@solana/web3.js";
import { useState } from "react";

export const CandyMachine: React.FC = () => {
  const { connection } = useConnection();
  const { publicKey, sendTransaction } = useWallet();
  const [nfts, setNfts] = useState<Nft[]>([]);

  const handleClick = async () => {
    const metaplex = Metaplex.make(connection);

    const result = await metaplex
      .nfts()
      .findAllByCandyMachine(
        new PublicKey(MY_CANDY_MACHINE_ID)
      );

    console.log(result);

    setNfts(result);
  };

  return (
    <>
      <button onClick={handleClick}>List Nfts</button>
      {nfts && nfts.map((nft) => <div key={nft.name}>{nft.toString()}</div>)}
    </>
  );
};

and this is error

Task.mjs?d5d1:42 Uncaught (in promise) TypeError: abort_controller__WEBPACK_IMPORTED_MODULE_0__.AbortController is not a constructor
    at Task.forceRun (Task.mjs?d5d1:42:38)
    at Task.run (Task.mjs?d5d1:29:1)
    at OperationClient.execute (OperationClient.mjs?3849:41:1)
    at NftClient.findAllByCandyMachine (NftClient.mjs?85a8:36:1)
    at _callee$ (CandyMachine.tsx?3d41:16:8)
    at tryCatch (runtime.js?ecd4:45:16)
    at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
    at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
    at asyncGeneratorStep (CandyMachine.tsx?3d41:1:1)
    at _next (CandyMachine.tsx?3d41:1:1)
    at eval (CandyMachine.tsx?3d41:1:1)
    at new Promise (<anonymous>)
    at eval (CandyMachine.tsx?3d41:1:1)
    at handleClick (CandyMachine.tsx?3d41:11:20)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:4210:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4274:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?ac89:4288:1)
    at executeDispatch (react-dom.development.js?ac89:9038:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js?ac89:9070:1)
    at processDispatchQueue (react-dom.development.js?ac89:9083:1)
    at dispatchEventsForPlugins (react-dom.development.js?ac89:9094:1)
    at eval (react-dom.development.js?ac89:9285:1)
    at batchedUpdates$1 (react-dom.development.js?ac89:26096:1)
    at batchedUpdates (react-dom.development.js?ac89:3988:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js?ac89:9284:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js?ac89:6462:1)
    at dispatchEvent (react-dom.development.js?ac89:6454:1)

[mayognaise]

Hi 👋 same here 🙏

[lorisleiva]

Hey 👋 Thanks for raising this! Are you just using a standard Next.js app so I can try to reproduce?

[mayognaise]

@lorisleiva Hi! yes just using a standard Next.js app 😄
I was digging the code and I am wondering it is because this part is not returning anything:

https://github.com/metaplex-foundation/js/blob/main/src/plugins/nftModule/findNftsByCandyMachine.ts#L30-L36

[jon890]

Hey 👋 Thanks for raising this! Are you just using a standard Next.js app so I can try to reproduce?

Yes I'am using standard Next.js, so you can try to reproduce this bug

[agtzdimi]

Hello 👋 it happens to me as well, when I upgraded to "v0.10.0" from "v0.9.0", I am using "Angular" for front-end, "NestJS" for back-end and it is a monorepo bundled with "nx".

Most likely it has to do with the webpack? I can provide more information if it is helpful

[lorisleiva]

Thanks, everyone! I've had a quick look at the code and I think I know what could be causing this. I've released a potential fix in version 0.11.1. Would you mind trying it out and telling me if it works? I've not had the time to reproduce the issue just yet.

P.S.: The npm package recently got renamed from @metaplex-foundation/js-next to @metaplex-foundation/js, so make sure you're using the right package as well. 😊

[mayognaise]

@lorisleiva Thank you so much! It worked!!!! 🎉

Just curious, it returns 2 items but it is supposed to be 8 items. by the candyMachineId.
Do you have any idea why?

[tjkyner]

I was running into this issue as well but upgrading to version 0.11.1 fixed it. Thank you @lorisleiva! 🙏

[lorisleiva]

Great! I'm glad it worked haha. I'll close this issue then.

With regards to the number of NFTs returns by that method, it could be because only two NFTs out of the eight were minted. This method only returns NFTs that were minted from a candy machine. The once still "in the candy machine" do not count as they are technically not NFTs yet.

[jon890]

Thanks!

[mayognaise]

Great! I'm glad it worked haha. I'll close this issue then.

With regards to the number of NFTs returns by that method, it could be because only two NFTs out of the eight were minted. This method only returns NFTs that were minted from a candy machine. The once still "in the candy machine" do not count as they are technically not NFTs yet.

Ahhh got it!! It totally makes sense. Thank you so much for answering the question 🙏