SolanaWeb 3.js package TypeError: s.TransactionInstruction is not a constructor

Question

I'm developing the front-end for a lending protocol where users lists NFT to lend on Solana. I'm getting an error on createListing:

await program.instruction.createListing(
        listingBump,
        params, {  
        accounts: {
          owner: wallet.publicKey,
          listing: listingPubkey,
          nftAccount: shipAccount,
          nftMint: shipMint.publicKey,
          collateralMint: collateralMint.publicKey,
          feeDestination: feeDestination,
          feeMint: atlasMint.publicKey,
          tokenProgram: TOKEN_PROGRAM_ID, 
          systemProgram: SystemProgram.programId,
        },
    signers: [wallet]
});

This is the error: Error while creating the listing TypeError: s.TransactionInstruction is not a constructor at Object.r [as createListing] (main-packed.js:1175) at Object.createListing (solana.js:915) and this is the line provoking it (on the package):

var Y = Object.freeze({
  __proto__: null,
  invoke: async function (t, e, n, i) {
    t = Q(t), i || (i = w());
    const s = new s.Transaction();
    return s.add(new s.TransactionInstruction({
      programId: t,
      keys: null != e ? e : [],
      data: n
    })), await i.send(s);
  },
  getMultipleAccounts: H
});

I'm not sure what is provoking the error. Also, it has to be noted that I'm using plain JS because I'm developing in Flutter using the Dart-JS interop. So I'm forced to use Browserify/Esmify package to bundle all of packages needed and have them exposed to the interop. Maybe this is related to the issue.

Answer 1

I got this error with ClojureScript and after scratching my head for 3 days I found a solution.

The anchor-ts client uses rollup to bundle ts code for the browser. In the process of bundling, it passes the code through a minification/uglification plugin called rollup-plugin-terser.

The terser magles the code in a way that the the variable assigned to the import of @solana/web3.js is reused.

ie: something like this happens in the final output

var s = require("@solana/web3.js")

function x() {
  var s, a, b; // ----> redefined s
  ...
  s.TransactionInstruction() // ----> calls method on original s
}

I forked anchor and got rid of the terser plugin. That fixed the error for me.

Answer 2

I followed the suggestion of forking it and removing terser plugin and it also worked for me!

Note: rollup was introduced in v0.19.0, so you might try resolving the @project-serum/anchor to version 0.18.2 and it should work without any further change required.