Irys-xyz / arweave-js-sdk

JS SDK for Irys on Arweave
110 stars 95 forks source link

Cannot get final name for export 'concatBuffers' #112

Closed lpbonomi closed 6 months ago

lpbonomi commented 9 months ago

I've just upgraded from Bundlr -> Irys and I'm getting the following error:

frontend:build: ../../node_modules/@irys/sdk/build/esm/web/irys.js + 52 modules
frontend:build: Cannot get final name for export 'concatBuffers' of ../../node_modules/@irys/sdk/node_modules/arbundles/build/web/esm/src/webUtils.js
JesseTheRobot commented 9 months ago

hey @lpbonomi , can you share what build tools/framework you're using? A repo link if possible would be fab.

JesseTheRobot commented 9 months ago

I've seen a similar error before - I suspect you need to make sure your build tools have export path resolution enabled (some have it disabled by default)

lpbonomi commented 9 months ago

Hi @JesseTheRobot ! Yes, of course.

I'm using Turbopack with a Next.js app and a blockchain-helper package, where the Irys functions are located. The Next.js app is using the app dir and typescript.

I'm getting the errors when importing the Irys functions from the Next.js app . I'd love to share the repo with you but the repo is private.

I'm not sure what would "export path resolution enabled" be, but I was using the Bundlr package before and it worked alright.

I'm glad to help you with anything else that you need

JesseTheRobot commented 9 months ago

@lpbonomi can you share your tsconfig.json?

lpbonomi commented 9 months ago

This is my Next.js config:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"],
      "@styles/*": ["./styles/*"],
      "@public/*": ["./public/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "types/**/*.d.ts",
    "contexts/web3authContext.js",
    "next.config.cjs",
    "helpers/solana/findNftsInWalletByCollection.js",
    ".eslintrc.js",
    "tailwind.config.js", "postcss.config.js"  
  ],
  "exclude": ["node_modules"]
}

And this is from the package where Irys is located:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "allowJs": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "declaration": true,
    "composite": true,
    "sourceMap": true,
    "declarationMap": true,
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "noUncheckedIndexedAccess": true,
    "lib": ["ES2022"],
    "noUnusedParameters": true,
    "noUnusedLocals": true,
  },
}
JesseTheRobot commented 9 months ago

@lpbonomi can you change "moduleResolution": "node", to "moduleResolution": "NodeNext", in the Next.js tsconfig?

lpbonomi commented 9 months ago

Still no luck

JesseTheRobot commented 9 months ago

What version of typescript & nextjs are you using? are you able to provide me a copy of the next & turbo config?

lpbonomi commented 9 months ago

Thanks for your time @JesseTheRobot, its very kind of you.

I'm using "typescript": "^5.1.3" This is the NextJS config:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
    serverActions:{
      allowedOrigins: ['frontend_app']
    }
  },
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      os: false,
      path: false,
      crypto: false,
    }
    return config
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.googleusercontent.com',
        port: '',
        pathname: '**',
      },
      {
        protocol: 'https',
        hostname: `${process.env.AWS_BUCKET}.s3.amazonaws.com`,
        port: '',
        pathname: '**',
      },
      {
        protocol: 'https',
        hostname: 'arweave.net',
        port: '',
        pathname: '**',
      },
      {
        // Twitter
        protocol: 'https',
        hostname: 'pbs.twimg.com',
        port: '',
        pathname: '**',
      },
      {
        // Facebook
        protocol: 'https',
        hostname: 'platform-lookaside.fbsbx.com',
        port: '',
        pathname: '**',
      },
      {
        // Discord
        protocol: 'https',
        hostname: 'cdn.discordapp.com',
        port: '',
        pathname: '**',
      },
      {
        protocol: 'https',
        hostname: process.env.NEXT_PUBLIC_DOMAIN,
        port: '',
        pathname: '**',
      },
    ],
  },
  async redirects() {
    return [
      // TODO sacar mas adelante
      {
        source: '/home',
        destination: '/',
        permanent: true,
      },
      {
        source: '/bienvenido',
        destination: '/poaps/bienvenido',
        permanent: true,
      },
      {
        source: '/ntvg-comunidad',
        destination: '/poaps/ntvg-comunidad',
        permanent: true,
      },
    ]
  },
  transpilePackages: [
    'misc',
    'eslint-config-custom',
    'database',
    'solana',
    'blockchain-helper',
  ],
  sentry: {
    hideSourceMaps: true,
  },
}

And this is the turbo config:

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "dev": {
      "cache": false,
      "persistent": true,
      "dependsOn": ["^db:generate"]
    },
    "build": {
      "dependsOn": ["^db:generate", "^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "start": {},
    "db:generate": {
      "cache": false
    },
    "db:push": {
      "cache": false
    },
    "lint": {
      "dependsOn": ["^db:generate"]
    },
    "checkCompile": {
      "dependsOn": ["^db:generate"]
    }
  }
}

Maybe I can try to remove all the sensible parts of the app and give you a reproduction repo. The only thins is that it would be around the 10th of January, I'm going on vacation.

JesseTheRobot commented 9 months ago

is this blockchain-helper package something I can get access to? or is it an internal package? If I can't figure this out with what you've given me then yeah I might need a minimal reproduction repo - I'm not concerned about the timelines as long as it doesn't impact your side negatively.

JesseTheRobot commented 9 months ago

also what version of nextJS is this? I think you missed that out in your last message

lpbonomi commented 9 months ago

I don't have any rush either because I'm already using the Bundlr package, so no worries @JesseTheRobot . The blockchain-helper is an internal package, I can later show it to you. My Next.js version is "next": "^14.0.4",

lpbonomi commented 6 months ago

Hi @JesseTheRobot, I've updated the Irys lib to the latest version but I'm still getting this kind of errors.

This is a function that gets the irys instance. Whenever this function is required by a module from the NextJS app I get those errors.

import { ENV } from "../../env.js";
import Irys from "@irys/sdk";
import { readFileSync } from "fs";

export function getIrysInstance(){ 
    const walletPath = ENV.SOLANA_CUSTODIAL_SECRET_KEY_PATH;
    const key = JSON.parse(readFileSync(walletPath!).toString());

    return new Irys({
        key,
        url: ENV.BUNDLR_RPC_HOST, 
        token:'solana',
        config: {
            providerUrl: ENV.BUNDLR_SOLANA_RPC_HOST,
            timeout: 120000,
        }
    });
}

The latest error that I've got is:

frontend:build: Failed to compile.
frontend:build: 
frontend:build: ../../node_modules/@irys/sdk/build/esm/esmIndex.js + 502 modules
frontend:build: Cannot get final name for export 'default' of ../../node_modules/@irys/query/node_modules/axios/index.js
frontend:build: 
frontend:build: 
frontend:build: > Build failed because of webpack errors
frontend:build: npm ERR! Lifecycle script `build` failed with error: 
frontend:build: npm ERR! Error: command failed 
frontend:build: npm ERR!   in workspace: frontend 
frontend:build: npm ERR!   at location: /Users/luispe/Repos/ultradrop-app/apps/frontend 

Please let me know if you need any more info

JesseTheRobot commented 6 months ago

Hey @lpbonomi - Can you prove me with the exact SDK version you're using, the output of npm ls, and a copy of your tsconfig/any build overrides (webpack section in next config for example)?

lpbonomi commented 6 months ago

Sure!

    "node_modules/@irys/sdk": {
      "version": "0.1.14",
luispe@MacBook-Pro ultradrop-app % npm ls
ultradrop-app@ /Users/luispe/Repos/ultradrop-app
├── @rushstack/eslint-patch@1.5.1
├─┬ admin@1.0.0 -> ./apps/admin
│ ├── @adminjs/express@6.1.0
│ ├── @adminjs/prisma@5.0.2
│ ├── @adminjs/relations@1.1.0
│ ├── @aws-sdk/client-s3@3.437.0
│ ├── @ffmpeg-installer/ffmpeg@1.1.0
│ ├── @types/aws-sdk@2.7.0
│ ├── @types/bcrypt@5.0.0
│ ├── @types/connect-pg-simple@7.0.0
│ ├── @types/express-session@1.17.7
│ ├── @types/express@4.17.20
│ ├── @types/fluent-ffmpeg@2.1.21
│ ├── @types/node@20.5.0
│ ├── @types/papaparse@5.3.8
│ ├── adminjs@7.5.9
│ ├── aws-helper@1.0.0 deduped -> ./packages/aws-helper
│ ├── aws-sdk@2.1447.0
│ ├── axios@1.5.0
│ ├── bcrypt@5.1.1
│ ├── concurrently@8.2.1
│ ├── connect-pg-simple@9.0.0
│ ├── database@0.0.0 deduped -> ./packages/database
│ ├── dotenv@16.3.1
│ ├── express-formidable@1.2.0
│ ├── express-session@1.17.3
│ ├── fluent-ffmpeg@2.1.2
│ ├── nodemon@3.0.1
│ ├── papaparse@5.4.1
│ ├── tslib@2.6.2
│ ├── typescript@5.2.2
│ └── zod@3.22.4
├─┬ aws-helper@1.0.0 -> ./packages/aws-helper
│ └── axios@1.5.0
├─┬ blockchain-helper@1.0.0 -> ./packages/blockchain-helper
│ ├── @irys/sdk@0.1.14
│ ├── @types/crypto-js@4.2.1
│ ├── @types/seedrandom@3.0.8
│ ├── aws-helper@1.0.0 deduped -> ./packages/aws-helper
│ ├── axios@1.6.2
│ ├── crypto-js@4.2.0
│ ├── database@0.0.0 deduped -> ./packages/database
│ ├── dotenv-cli@7.3.0
│ ├── ethers@6.9.0
│ ├── misc@
│ └── seedrandom@3.0.5
├─┬ database@0.0.0 -> ./packages/database
│ ├── @prisma/client@5.8.1
│ ├── aws-helper@1.0.0 deduped -> ./packages/aws-helper
│ ├── prisma@5.8.1
│ └── tsx@3.12.10
├─┬ e2e@1.0.0 -> ./packages/e2e
│ ├── @playwright/test@1.39.0
│ ├── @types/node@20.8.9
│ ├── pg@8.11.3
│ └── typescript@5.2.2 deduped
├─┬ eslint-config-custom@1.0.0 -> ./packages/eslint-config-custom
│ ├── @nozbe/eslint-plugin-nozbe@1.4.1
│ ├── @typescript-eslint/eslint-plugin@6.8.0
│ ├── @typescript-eslint/parser@6.8.0
│ ├── eslint-config-prettier@9.0.0
│ ├── eslint-config-standard@17.1.0
│ ├── eslint-plugin-import@2.28.1
│ ├── eslint-plugin-n@16.2.0
│ ├── eslint-plugin-prettier@5.0.1
│ ├── eslint-plugin-promise@6.1.1
│ ├── eslint@8.51.0
│ └── prettier@3.0.3
├─┬ frontend@ -> ./apps/frontend
│ ├── @auth/prisma-adapter@1.0.11
│ ├── @aws-sdk/client-s3@3.437.0 deduped
│ ├── @aws-sdk/s3-request-presigner@3.391.0
│ ├── @ckeditor/ckeditor5-engine@35.4.0
│ ├── @emotion/react@11.11.1
│ ├── @emotion/styled@11.11.0
│ ├── @fortawesome/fontawesome-svg-core@6.4.2
│ ├── @fortawesome/free-brands-svg-icons@6.4.2
│ ├── @fortawesome/free-regular-svg-icons@6.4.2
│ ├── @fortawesome/free-solid-svg-icons@6.4.2
│ ├── @fortawesome/react-fontawesome@0.2.0
│ ├── @headlessui/react@1.7.16
│ ├── @heroicons/react@2.0.18
│ ├── @hookform/resolvers@3.3.4
│ ├── @metaplex-foundation/js@0.19.4
│ ├── @metaplex/js@4.12.0
│ ├── @next/bundle-analyzer@13.4.16
│ ├── @nozbe/eslint-plugin-nozbe@1.4.1 deduped
│ ├── @project-serum/anchor@0.25.0
│ ├── @reduxjs/toolkit@2.0.1
│ ├── @restart/hooks@0.4.11
│ ├── @sentry/nextjs@7.92.0
│ ├── @stripe/stripe-js@1.54.2
│ ├── @tailwindcss/forms@0.5.4
│ ├── @tanstack/eslint-plugin-query@5.0.0
│ ├── @testing-library/jest-dom@5.17.0
│ ├── @testing-library/react@14.0.0
│ ├── @total-typescript/ts-reset@0.5.1
│ ├── @types/i18next@13.0.0
│ ├── @types/js-cookie@3.0.3
│ ├── @types/node@18.17.6
│ ├── @types/nodemailer@6.4.14
│ ├── @types/qs@6.9.7
│ ├── @types/react-dom@18.2.17
│ ├── @types/react@18.2.20
│ ├── autoprefixer@10.4.16
│ ├── bcrypt@5.1.1 deduped
│ ├── database@0.0.0 deduped -> ./packages/database
│ ├── date-fns@2.30.0
│ ├── encoding@0.1.13
│ ├── eslint-config-custom@1.0.0 deduped -> ./packages/eslint-config-custom
│ ├── eslint-config-next@13.5.5
│ ├── eslint-plugin-react@7.33.2
│ ├── ethers@6.9.0
│ ├── hls.js@1.4.14
│ ├── i18next@23.5.1
│ ├── jest-environment-jsdom@29.7.0
│ ├── jest-fetch-mock@3.0.3
│ ├── jest@29.6.2
│ ├── jose@4.15.4
│ ├── jquery@3.7.0
│ ├── js-cookie@3.0.5
│ ├── mercadopago@2.0.7
│ ├── misc@ deduped
│ ├── next-auth@5.0.0-beta.4
│ ├── next-video@0.15.0
│ ├── next@14.1.1
│ ├── nodemailer@6.9.7
│ ├── postcss@8.4.31
│ ├── prettier-plugin-tailwindcss@0.3.0
│ ├── qs@6.11.2
│ ├── react-dom@18.2.0
│ ├── react-hook-form@7.50.1
│ ├── react-hot-toast@2.4.1
│ ├── react-markdown@8.0.7
│ ├── react-multi-carousel@2.8.4
│ ├── react-phone-number-input@3.3.2
│ ├── react-redux@9.1.0
│ ├── react-share@4.4.1
│ ├── react-spring-3d-carousel@1.3.4
│ ├── react-tooltip@5.21.1
│ ├── react@18.2.0
│ ├── redux-persist@6.0.0
│ ├── sharp@0.32.6
│ ├── solana@1.0.4
│ ├── stripe@14.14.0
│ ├── tailwindcss@3.4.0
│ ├── twilio@4.21.0
│ ├── typescript@5.2.2 deduped
│ ├── use-debounce@10.0.0
│ ├── zod-i18n-map@2.27.0
│ └── zod@3.22.4 deduped
└── turbo@1.12.4

blockchain-helper tsconfig:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "allowJs": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "declaration": true,
    "composite": true,
    "sourceMap": true,
    "declarationMap": true,
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "noUncheckedIndexedAccess": true,
    "lib": ["ES2022"],
    "noUnusedParameters": true,
    "noUnusedLocals": true,
  },
}

NextJS tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "noUncheckedIndexedAccess": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"],
      "@styles/*": ["./styles/*"],
      "@public/*": ["./public/*"]
    }
  },
  "include": [
    "video.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "types/**/*.d.ts",
    "next.config.cjs",
    "helpers/solana/findNftsInWalletByCollection.js",
    ".eslintrc.js",
    "tailwind.config.js", "postcss.config.js"  
  ],
  "exclude": ["node_modules", ".next"]
}

NextJS webpack config:

  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      os: false,
      path: false,
      crypto: false,
    }
    return config
  },
JesseTheRobot commented 6 months ago

@lpbonomi looks like this is a well known issue - see https://github.com/vercel/next.js/issues/39375#issuecomment-1530828194 for a potential fix

lpbonomi commented 6 months ago

Mmm, is that the same error? I've tried the solution and didn't have any luck.

I've tried transpiling the package:

  transpilePackages: [
    '@irys/sdk',
  ],

and also setting:

    experimental: {
    esmExternals: 'loose',
  },
JesseTheRobot commented 6 months ago

afaict it's the same family of error, shame the fixes don't seem to have worked - did it change any error messages? Also, can you try adding @irys/query to the transpilePackages array and see if that helps?

lpbonomi commented 6 months ago

Just tried adding @irys/query apart from @irys/sdk but no luck. Maybe I can try creating a minimal repro repo, I don't think I'll do it today but yes for this week

JesseTheRobot commented 6 months ago

if you could that would be fab

lpbonomi commented 6 months ago

Hi @JesseTheRobot while workin in the repro I stumbled upon this error:

./node_modules/keyv/src/index.js:22:14
Module not found
  20 |  if (options.adapter || options.uri) {
  21 |      const adapter = options.adapter || /^[^:+]*/.exec(options.uri)[0];
> 22 |      return new (require(adapters[adapter]))(options);
     |                  ^^^^^^^^^^^^^^^^^^^^^^^^^^
  23 |  }
  24 |
  25 |  return new Map();

https://nextjs.org/docs/messages/module-not-found

any idea why it's happening?

JesseTheRobot commented 6 months ago

Hey @lpbonomi , nothing off the bat, I've not seen that error before - do you have the require/import trace for it to figure out where it's coming from? Also the string it's trying to require would be good information if you can get that. I would suggest wiping and reinstalling your node modules as a first step before digging in more (it has fixed more issues than I would care to count lol).

JesseTheRobot commented 6 months ago

Side note: ran NPM ls, it looks like this is a nested dep for the new aptos TS SDK we upgraded to very recently - cc @0xmaayan , do you have any insights?

0xmaayan commented 6 months ago

I have tested a nextjs app with @irys/sdk@0.0.14 and @irys/sdk@0.0.15 and didn't have any issues

lpbonomi commented 6 months ago

@JesseTheRobot when using the --turbo flag from NextJS I get nothing else than the error that I've copied before. When removing the flag I can run the project in dev mode but I still see some errors:

Import trace for requested module:
../../node_modules/keyv/src/index.js
../../node_modules/cacheable-request/src/index.js
../../node_modules/got/dist/source/core/index.js
../../node_modules/got/dist/source/create.js
../../node_modules/got/dist/source/index.js
../../node_modules/@aptos-labs/aptos-client/dist/node/index.node.mjs
../../node_modules/@aptos-labs/ts-sdk/dist/esm/chunk-FWDKABRW.mjs
../../node_modules/@aptos-labs/ts-sdk/dist/esm/index.mjs
../../node_modules/@irys/sdk/build/esm/web/tokens/index.js
../../node_modules/@irys/sdk/build/esm/web/irys.js
../../node_modules/@irys/sdk/build/esm/esmIndex.js
../../packages/blockchain-helper/dist/src/arweave/instance.js
../../packages/blockchain-helper/dist/index.js
./app/layout.tsx
 ⚠ ../../node_modules/keyv/src/index.js
Critical dependency: the request of a dependency is an expression

When building I get the following ones:

Failed to compile.

../../node_modules/@irys/sdk/build/esm/web/irys.js + 53 modules
Cannot get final name for export 'concatBuffers' of ../../node_modules/@irys/sdk/node_modules/arbundles/build/web/esm/src/webUtils.js

> Build failed because of webpack errors

Maybe it's best to wait for me to get the repro repo (or find whatever is wrong while doing it)

Thanks for all your help

0xmaayan commented 6 months ago

Critical dependency: the request of a dependency is an expression

Looks like it is a common issue out there with webpack, looking online there are some suggestions on how to resolve it.

One thing that catches my eyes is that it tries to use got client package - which not completely sure why as it should resolve to axios if you are on a web env. It might be something to do with how you use Irys on a node env here but then consume it in a nextjs web based app...?

Fwiw, a new nextjs project with only @irys/sdk@0.0.14 (that uses aptos sdk) works for me on either dev and build

JesseTheRobot commented 6 months ago

Maybe it's best to wait for me to get the repro repo (or find whatever is wrong while doing it)

Unless you are able to share the current codebase with me, I would say so - this seems like something I'd need a repro environment to get to the bottom of

lpbonomi commented 6 months ago

Hi @JesseTheRobot, here's the repo: https://github.com/lpbonomi/irys-repro

After adding the envs:

SOLANA_CUSTODIAL_SECRET_KEY_PATH=/path/to/solana/.config/solana/id.json
BUNDLR_RPC_HOST=https://devnet.bundlr.network
BUNDLR_SOLANA_RPC_HOST=https://api.devnet.solana.com

You just have to npm i, npm run dev and go to http://127.0.0.1:3101/ to see the error:

Screenshot 2024-03-08 at 10 26 48

Keep in mind that when creating this I got another error:

Screenshot 2024-03-08 at 10 20 48

I had to install borsh to fix it, maybe it's a missing dependency from the project?

JesseTheRobot commented 6 months ago

Hey @lpbonomi , what token(s) are you planning to use? just solana? if so, I think I've gotten it working

JesseTheRobot commented 6 months ago

the solution looks like:

// blockchain-helper/src/arweave/instance.ts
import Irys from "@irys/sdk/build/esm/node/base";
import Solana from "@irys/sdk/build/esm/node/tokens/solana";
// ...
    return  new Irys({
        url: ENV.BUNDLR_RPC_HOST, config: { providerUrl:ENV.BUNDLR_SOLANA_RPC_HOST }, getTokenConfig: (irys) =>
          new Solana({
            name: "solana",
            ticker: "SOL",
            providerUrl: ENV.BUNDLR_SOLANA_RPC_HOST,
            irys,
            wallet: key
          })
      });

This works because it forces the compiler to only import the modules that we need (for some reason next isn't tree shaking away aptos, etc) which are causing the issues (for reasons I'm not sure and will need to investigate)

lpbonomi commented 6 months ago

Hi @JesseTheRobot ! Looks like this is working! Thank you so much for all your help, I'm really thankful.

I'm not sure if I should close or not the issue, I'll leave it up to you in case you want to link it with the tree shaking problems.

JesseTheRobot commented 6 months ago

I think for now I'll close it, but I'll revisit it in future to try and figure out why next wasn't able to tree shake properly