Buffer is not defined on a project after running the static app after vite build command

[gat786]

This project revolves around dealing with web3.js and moralis which I need them to work. I had pleasant experience with building up until I went on to deploying it. It always gives me Buffer is not defined after building the project. The same thing works in the dev environment. So, something is going wrong during build process.

My project is here https://github.com/gat786/ChainAgreement

Steps to reproduces -

Clone the repo and do a yarn build on packages/frontend.

Expected behavior -

Web App works like fine

Current Behavior -

Gives Buffer is not defined in the browser console with Javascript fully not working.

Any help would be appreciated.

I also have the frontend deployed here for a quick view - https://infallible-liskov-fb5af6.netlify.app/

[daniserafs]

did you find an answer to this problem? i'm having the same one here

[brunogdsdev]

did you find an answer to this problem? i'm having the same one here ²

[daniserafs]

I actually did! You can check if any of these work for you too!
daniserafs/simple-dapp-coinbase-wallet-sdk@b90eee3
daniserafs/simple-dapp-coinbase-wallet-sdk@8a2ba27

If you still have questions I'm free to talk about it.

[brunogdsdev]

to help future devs who go through this:

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'] })],
		},
	},
})

[Xaber20110202]

change inject({ Buffer: ['Buffer', 'Buffer'] }) to inject({ Buffer: ['buffer/', 'Buffer'] })

fixed

[vite]: Rollup failed to resolve import "Buffer" from "node_modules/keccak/lib/keccak.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

[Xaber20110202]

My vite.config.ts

import path, { join } from "path"
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// import eslint from 'vite-plugin-eslint'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import postcssNesting from 'postcss-nesting'
import tsConfigPaths from 'vite-tsconfig-paths'
import inject from '@rollup/plugin-inject'
import nodePolyfills from "rollup-plugin-polyfill-node";
import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";
import {NodeModulesPolyfillPlugin} from "@esbuild-plugins/node-modules-polyfill";

// https://vitejs.dev/config/
export default defineConfig((mode) => {
  const env = loadEnv(mode, process.cwd())
  const processEnvValues = {
    'process.env': Object.entries(env).reduce((prev, [key, val]) => {
      return {
        ...prev,
        [key]: val
      }
    }, {})
  }

  if (mode.mode === 'development') {
    return {
      define: Object.assign(processEnvValues, { global: {} }),
      resolve: {
        alias: {
          '@': join(__dirname, "src"),
          util: 'rollup-plugin-node-polyfills/polyfills/util',
          stream: "rollup-plugin-node-polyfills/polyfills/stream",
          process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
          // 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
        }
      },
      plugins: [
        vue(),
        // eslint(),
        // VueI18nPlugin({
        //   include: path.resolve(__dirname, './src/locales/**'), // PUT YOUR OWN PATH TO LOCALES HERE
        // }),
        postcssNesting,
        tsConfigPaths()],
    }
  }

  return {
    // define: Object.assign(processEnvValues, { global: {} }),
    resolve: {
      alias: {
        '@': join(__dirname, "src"),
        util: 'rollup-plugin-node-polyfills/polyfills/util',
        stream: "rollup-plugin-node-polyfills/polyfills/stream",
        process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
        // 'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
      }
    },
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          // can't use this 
          // https://github.com/intlify/vue-i18n-next/issues/970
          // global: "globalThis",
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            process: true,
            buffer: true
          }),
          NodeModulesPolyfillPlugin()
        ],
      },
    },
    build: {
      rollupOptions: {
        plugins: [
          inject({ Buffer: ['buffer/', 'Buffer'] }),
          nodePolyfills()
        ]
      }
    },
    plugins: [
      vue(),
      // eslint(),
      // VueI18nPlugin({
      //   include: path.resolve(__dirname, './src/locales/**'), // PUT YOUR OWN PATH TO LOCALES HERE
      // }),
      postcssNesting,
      tsConfigPaths()],
  }
})

index.html add nodespecific.ts

<script type="module" src="/src/nodespecific.ts"></script>

nodespecific.ts

import { Buffer } from 'buffer/'

window.Buffer = Buffer as any

[creampnx-x]

this can sovle, bu only for those not using Buffer.

[KitB]

For anyone who has found that rollup-plugin-polyfill-node has suddenly stopped working in production (and all builds), switching to https://github.com/davidmyersdev/vite-plugin-node-polyfills appears to have worked for me.

[stefanozanella]

@KitB for the record, the polyfill injection was working properly, the issue was with one of my dependencies looking for Buffer in globalThis, which is not covered by the plugin. I ended up adding a custom Rollup inject on globalThis.Buffer, together with the already configured plugin.

[KitB]

I was able to remove my other globalThis injection after adding the polyfill; either there's a configuration for it in the polyfill or at some point I removed a library that used globalThis.

[stefanozanella]

There is a global configuration value in the polyfill plugin, but from what I see it just exports global, so unless I'm misunderstanding how it works it's not going to polyfill Buffer inside globalThis. But I haven't dug very deep into it so I'm not 100% sure.

[wighawag]

@stefanozanella do you mind sharing your custom rollup inject ? thanks!

[stefanozanella]

@wighawag sure, here we go:

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        inject({
          // cbor-x checks for Buffer on the global object, and the polyfills plugin doesn't cover this case for the
          // production build (but works in development because Buffer gets injected as a banner, so it's "naturally"
          // available on the global object)
          "globalThis.Buffer": ["buffer", "Buffer"],
        }),
      ],
    },
  },
  plugins: [
    react(),
    nodePolyfills({
      include: ["buffer"],
      globals: {
        Buffer: true,
      },
    }),
  ],
})

Please bear in mind that YMMV. For me it worked like this because of this offending line, but it might be that other libraries might be doing different checks (e.g. a check on window or global). The gist of the solution would be valid also in those cases though.