Unable to run as Nuxt3 plugin

boostie commented 2 years ago

Hi all,

I am creating a new issue as comments in the older closed issue are not relevant. Basically not able to run this mode as plugin in Nuxt3/Vite configuration. It doesn't work in "nuxi run dev" but builds fine and works, it has to work on dev also to actually enable the development.

Without any options in the config, I get the following errors:

[ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/@solana/web3.js/lib/index.browser.esm.js:4466:20:
  4466 │     const U64_MAX = 2n ** 64n - 1n;
       ╵                     ~~
✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/@solana/web3.js/lib/index.browser.esm.js:4466:26:
  4466 │     const U64_MAX = 2n ** 64n - 1n;
       ╵                           ~~~
✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/@solana/web3.js/lib/index.browser.esm.js:4466:32:
  4466 │     const U64_MAX = 2n ** 64n - 1n;

If I add the following to configuration for Vite in nuxt.config

build: {
    transpile: [
      "@solana/buffer-layout",
      "@solana/wallet-adapter-base",
      "@solana/wallet-adapter-bitkeep",
      "@solana/wallet-adapter-bitpie",
      "@solana/wallet-adapter-blocto",
      "@solana/wallet-adapter-clover",
      "@solana/wallet-adapter-coin98",
      "@solana/wallet-adapter-coinhub",
      "@solana/wallet-adapter-ledger",
      "@solana/wallet-adapter-mathwallet",
      "@solana/wallet-adapter-phantom",
      "@solana/wallet-adapter-safepal",
      "@solana/wallet-adapter-slope",
      "@solana/wallet-adapter-solflare",
      "@solana/wallet-adapter-sollet",
      "@solana/wallet-adapter-solong",
      "@solana/wallet-adapter-torus",
      "@solana/wallet-adapter-vue",
      "@solana/wallet-adapter-vue-ui",
      "@solana/wallet-adapter-walletconnect",
      "@solana/wallet-adapter-wallets",
      "@solana/web3.js"
    ]
  }

The Big Integer error disappears, but this prevents the whole app from loading. Anyone experienced the same thing?

WARN Sourcemap for "/Users/Shared/data/projects/audacious/audacious-app/node_modules/@solana/buffer-layout/lib/Layout.js" points to missing source files

Thanks

tiagoapp commented 2 years ago

This issue is related to Vite. Add to nuxt config under vite.

    esbuildOptions: {
         target: 'esnext'
    },
    build: {
        target: 'esnext'
    }

boostie commented 2 years ago

This issue is related to Vite. Add to nuxt config under vite.
  esbuildOptions: {
       target: 'esnext'
  },
  build: {
      target: 'esnext'
  }

This didn't help. So making the change without transpile yields the same results, while with transpile it gives another error which already present without those options, as mentioned above also.

Sourcemap for "/Users/Shared/data/projects/audacious/audacious-app-nuxt3/node_modules/@solana/buffer-layout/lib/Layout.js" points to missing source files

Do you happen to have an example config maybe? I am planning to put this into the cloud for reproduction.

tiagoapp commented 2 years ago

This issue is related to Vite. Add to nuxt config under vite.
    esbuildOptions: {
         target: 'esnext'
    },
    build: {
        target: 'esnext'
    }
This didn't help. So making the change without transpile yields the same results, while with transpile it gives another error which already present without those options, as mentioned above also.

Sourcemap for "/Users/Shared/data/projects/audacious/audacious-app-nuxt3/node_modules/@solana/buffer-layout/lib/Layout.js" points to missing source files

Do you happen to have an example config maybe? I am planning to put this into the cloud for reproduction.

I've setup a repo with this working. It does includes Anchor as well.

You can look up the nuxt.config.ts or just clone the repo and you should be good to go. The define and optimizeDeps.includes params are only necessary if you are using Anchor.

https://github.com/tiagoappetite/nuxt3-solana

lorisleiva / solana-wallets-vue

Unable to run as Nuxt3 plugin #30