Nuxt•2d ago

How to polyfill buffer when using web3 Solana connector

Hi, I am facing a build issue when I try to build for cloudflare_pages

ERROR  Cannot resolve "unenv/runtime/node/buffer/index/" from "~/Projects/playground/nuxt-walletconnect/node_modules/.pnpm/@[email protected]/node_modules/@keystonehq/bc-ur-registry/dist/index.js" and externals are not allowed!

ERROR  Cannot resolve "unenv/runtime/node/buffer/index/" from "~/Projects/playground/nuxt-walletconnect/node_modules/.pnpm/@[email protected]/node_modules/@keystonehq/bc-ur-registry/dist/index.js" and externals are not allowed!

here is minimal reproduction https://stackblitz.com/github/kleinpetr/nuxt-solana I was trying to enable experimental clientNodeCompat: true but it didn't help I was trying to polyfill node by this example https://stackoverflow.com/questions/77903800/vite-solana-wallet-adapter but it also didn't help I wouldn't need to know how I could get more details and how to think about the polyfilling. Thanks for your ideas 🙏

StackBlitz

Kleinpetr - Nuxt Solana - StackBlitz

Run Nuxt Solana created by Kleinpetr on StackBlitz

Stack Overflow

Vite + Solana wallet adapter

Does the WalletConnectButton work with vite? Everything is working fine for me in local dev, but after build and deploy the button is disabled and does not allow me to connect. This behaviour is si...

2 Replies

kapa.ai•2d ago

Hi @kleinpetr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issue with polyfilling Buffer when using the Solana web3 connector in a Nuxt project deployed to Cloudflare Pages, I can provide some guidance based on the available information. 1. Experimental clientNodeCompat feature: You mentioned trying to enable clientNodeCompat: true, which is a step in the right direction. This feature allows Nuxt to automatically polyfill Node.js imports in the client build using unenv. However, it's important to note that for globals like Buffer to work in the browser, you need to manually inject them as mentioned in the Nuxt documentation (https://nuxt.com/docs/guide/going-further/experimental-features#clientnodecompat). 2. Manual Buffer injection: To manually inject Buffer, you can add the following code to a plugin or in your app's entry point:

import { Buffer } from 'node:buffer'

globalThis.Buffer = globalThis.Buffer || Buffer

import { Buffer } from 'node:buffer'

globalThis.Buffer = globalThis.Buffer || Buffer

3. Using vite-plugin-node-polyfills: While you mentioned that using the example from Stack Overflow didn't help, it might be worth revisiting this approach. You can try integrating vite-plugin-node-polyfills in your Nuxt configuration:

import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  // ... other config
  vite: {
    plugins: [
      nodePolyfills({
        include: ['buffer', 'process']
      })
    ]
  }
})

import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  // ... other config
  vite: {
    plugins: [
      nodePolyfills({
        include: ['buffer', 'process']
      })
    ]
  }
})

4. Transpiling problematic libraries: If you're still encountering issues, you might need to transpile certain libraries. You can do this by adding them to the build.transpile array in your Nuxt config as suggested in the Nuxt documentation (https://nuxt.com/docs/guide/concepts/esm#troubleshooting-esm-issues):

export default defineNuxtConfig({
  build: {
    transpile: ['@keystonehq/bc-ur-registry']
  }
})

export default defineNuxtConfig({
  build: {
    transpile: ['@keystonehq/bc-ur-registry']
  }
})

5. Aliasing libraries: In some cases, you might need to manually alias the library to its CommonJS version:

export default defineNuxtConfig({
  alias: {
    '@keystonehq/bc-ur-registry': '@keystonehq/bc-ur-registry/dist/cjs/index.js'
  }
})

export default defineNuxtConfig({
  alias: {
    '@keystonehq/bc-ur-registry': '@keystonehq/bc-ur-registry/dist/cjs/index.js'
  }
})

To get more details about the error, you can try running the build process with increased verbosity or using Nuxt's built-in devtools. Remember that when deploying to Cloudflare Pages, you need to ensure that your build process is configured correctly for this environment. You might want to double-check your Cloudflare Pages configuration (https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages) and make sure you're using the correct preset (cloudflare_pages). If these suggestions don't resolve your issue, you might need to investigate further into the specific requirements of the Solana web3 connector and how it interacts with Nuxt and Cloudflare Pages. Consider reaching out to the maintainers of the Solana web3 connector or the Nuxt community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@672035758940356608> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to polyfill buffer when using web3 Solana connector