Nuxt3: process & buffer are undefined

Question

I'm building a Dapp using Nuxt3 but I have a few errors when using packages:

• @coinbase/wallet-sdk
• Axeptio

window.axeptioSettings = {
    clientId: '...',
    cookiesVersion: '...',
  }
  ;(function (d, s) {
    var t: any = d.getElementsByTagName(s)[0],
      e: any = d.createElement(s)
    e.async = true
    e.src = '//static.axept.io/sdk.js'
    t.parentNode.insertBefore(e, t)
  })(document, 'script')

I follwed this comment on github that allows Vite to get process working perfectly in devbut when building yarn build and yarn start I'm getting errors:

• Buffer is not defined
• The axeptio's script is generating an error so I have to comment it ...

How can I get rid of these errors ? May I use Webpack instead of Vite ? (and how to disable Vite)

Thank you for your help

Answer 1

Okay, I solved it by adding

yarn add buffer

import { Buffer } from 'buffer'

globalThis.Buffer = Buffer

Answer 2

3.10 has support for these polyfills.

import { Buffer } from 'node:buffer'
import process from 'node:process'

or you can provide your own

// ~/plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

https://github.com/nuxt/nuxt/releases/tag/v3.10.0