import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
export default defineNuxtConfig({
vite: {
    logLevel: 'info',
    // plugins: [eslintPlugin()],
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis'  // fix nuxt3 global
        plugins: [
          NodeGlobalsPolyfillPlugin({
            process: true,  // fix nuxt3 process
            buffer: true
          }),
          NodeModulesPolyfillPlugin()
There are no problems when yarn dev and no errors when yarn build.

Just prompt when yarn preview:Uncaught ReferenceError: Buffer is not defined
          
for me what worked was:
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from 'path'

import inject from '@rollup/plugin-inject'
export default defineConfig({
	plugins: [vue()],
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src'),
	build: {
		rollupOptions: {
			plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
reply to this comment:
vitejs/vite#2785 (reply in thread)
          
I had an issue with Buffer in a few situations (Vite/Vue, Nuxt) and the above has worked before, but using Nuxt3 (rc9) I could not get past the whole Buffer not defined there or it duplicating itself causing another error..
This is what I have that got me using a web3 npm package that was causing the issue to begin with (I will dig into the package later and see how its using Buffer, but for now this is what I did)
./nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  srcDir: './src',
  ssr: false,
  vite: {
    resolve: {
      alias: {
        stream: 'stream-browserify',
        // process: 'process/browser',
        // util: 'util'
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        plugins: [
          NodeGlobalsPolyfillPlugin()
Created a new file ./src/server/plugins/render.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    html.head.push('<script>var global = global || window</script>')
    html.head.push(`<script type="module">
      import { Buffer as Buffer } from '/Buffer.js'
      window.Buffer = Buffer || []
      window.process = window.process || { env: {} }
    </script>`)
I added global here as well because the Buffer injection was complaining about global being undefined, so just another shortcut.. process was complaining during the production build about an env key missing.
I had seen the nitro:html hook from this issue: #14172
Also I put Buffer.js in my public folder since its importing a local file above, you can find it online or I pasted it here: https://gist.github.com/WhiteR4bbitt/dcdf6d8ceae07df414225a63d118f300
There are probably other ways to include this file, but things just didn't want to work.. You may also need more alias' if it complains about other missing dependencies. (commented out above)
          
Hey there, it's always great to add a real reproduction link like described in the docs. Anyways I've created one with the latest Nuxt Version (https://stackblitz.com/edit/github-7fvdyh?file=nuxt.config.ts,package.json,app.vue) and everything works like a charm configuring it in the right way. Since this is not directly a nuxt issue and more an issue with the modules you are using and they way you configure them in vite, I'd suggest to close this.
          
I have the same problem with Buffer, using it inside a plugin (Buffer.from(..)) gives : Buffer is not defined

Which is the recommended solution ?
          
Try installing buffer from npm and import it into your file that contains buffer.
Example:
import { Buffer } from "buffer";