Unable to build Nuxt 3/Vite project

[timhanlon]

Describe the bug I've been able to get a Nuxt 3/Vite project to build with @solana/web3.js and @solana/wallet-adapter-vue, but I'm unable to import a wallet from @solana/wallet-adapter-wallets.

I'm using import { getPhantomWallet } from '@solana/wallet-adapter-wallets' in my project, and the repro.

Originally this was breaking on the Ledger wallet, which I eventually got working, now I'm stuck on the Torus wallet.

With @toruslabs/eccrypto in optimizeDeps I get ReferenceError: Buffer is not defined, and without it in optimizeDeps (which I believe is necessary for Buffer to be shimmed) I get Uncaught SyntaxError: The requested module '/_nuxt/node_modules/@toruslabs/eccrypto/browser.js?v=31b23600' does not provide an export named 'decrypt'.

Is there a way I can import a single wallet without needing to deal with the CJS/ESM & Node built-in issues across every wallet?

To Reproduce Minimal repro on CodeSandbox

Expected behavior Ability to import wallets.

Desktop OS X 10.15.7 / Chrome

[jordaaash]

Thanks for reporting this. I think it might be the same issue seen here: https://github.com/solana-labs/wallet-adapter/issues/153#issuecomment-968352050

I'm not familiar with Nuxt, but do you think it's related to server side rendering? Is there a way to specify which modules should be external / ignored?

[timhanlon]

I came across that issue at some stage but don't think it's related – SSR is disabled in my project and the repo, on line 78 of nuxt.config.js.

[timhanlon]

Got it working. For anyone following along at home, here are my settings. Fair warning: some of this may be unnecessary.

nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config

import { Buffer } from 'buffer'
import inject from '@rollup/plugin-inject'
import Inspect from 'vite-plugin-inspect'

// https://github.com/vitejs/vite/discussions/2785

export default defineNuxtConfig({
  meta: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
  },
  buildModules: [
    'nuxt-windicss',
  ],
  vite: {
    resolve: {
      alias: { '@ledgerhq/devices/lib': '@ledgerhq/devices/lib-es' },
      dedupe: ["secp256k1", "bn.js"]
    },
    define: {
      "global": {},
      "process.env.NODE_DEBUG": JSON.stringify("")
    },
    plugins: [
      inject({
        Buffer: ['buffer', 'Buffer']
      }),
      Inspect(),
    ],
    optimizeDeps: {
      include: [
        '@solana/web3.js',
        '@solana/web3.js > bn.js',
        '@solana/web3.js > borsh',
        '@solana/web3.js > buffer',
        'js-sha3',
        'secp256k1',
        'jayson',
        'rpc-websockets',
        '@solana/buffer-layout',
        'borsh',
        'tweetnacl',
        'buffer',
        'eventemitter3',
        '@blocto/sdk',
        'bs58',
        'events',
        'semver',
        'base64url',
        'keccak',
        'randombytes',
        'readable-stream',
        'end-of-stream',
        'once',
        'pump',
        'fast-safe-stringify',
        'lodash.merge',
        '@toruslabs/eccrypto',
        '@toruslabs/http-helpers',
        '@toruslabs/tweetnacl-js',
        '@solana/wallet-adapter-vue',
        'util'
      ],
    },
  },
  build: {
    transpile: [
      '@blocto/sdk',
      '@project-serum/sol-wallet-adapter',
      '@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'
    ],
  },
  ssr: false
})

tsconfig.json:

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "isolatedModules": true,
    "esModuleInterop": true
  }
}

[0xzachvai]

timhanlon 's settings worked in my Vue but non-nuxt project. I stripped it down, and this is the bare minimum I needed to get things to work:

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    inject({
      Buffer: ['buffer', 'Buffer']
    }),
  ],
  define: {
    "global": {},
    "process.env.NODE_DEBUG": JSON.stringify("")
  },
  optimizeDeps: {
    include: [
      'buffer',
    ]
  },
})

[timhanlon]

@0xzachvai Awesome – what version of Vite are you using?

[0xzachvai]

@timhanlon vite --version outputs: vite/2.4.2 linux-x64 node-v16.7.0

[ralyodio]

getting process is not defined in vite