Skip to content

Identifier 'Buffer' has already been declared - when multiple sdks are declaring/adding Buffer #12

@Nikunj1729

Description

@Nikunj1729

Uncaught SyntaxError: Identifier 'Buffer' has already been declared (at intuit-oauth-ts.js?v=ad72efd1:238:1)

My environment:
vite: 4.4.0

Vite Config

import {defineConfig} from "vite";
import nodePolyfills from "rollup-plugin-polyfill-node";
import {NodeGlobalsPolyfillPlugin} from "@esbuild-plugins/node-globals-polyfill";
import {NodeModulesPolyfillPlugin} from "@esbuild-plugins/node-modules-polyfill";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
import {esbuildCommonjs} from "@originjs/vite-plugin-commonjs";

import svgrPlugin from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig(({command}) => {
  return {
    base: command == "serve" ? "/cockpit/" : "/",
    plugins: [
      react(),
      tsconfigPaths(),
      svgrPlugin({svgrOptions: {icon: true}}),
      {
        name: "fix-node-globals-polyfill",
        setup(build) {
          build.onResolve({filter: /util\.js/}, ({path}) => ({path}));
        },
      },
    ],
    server: {
      port: 3000,
    },
    resolve: {
      alias: {
        // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
        // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
        // process and buffer are excluded because already managed
        // by node-globals-polyfill
        util: "util",
        sys: "util",
        events: "rollup-plugin-node-polyfills/polyfills/events",
        stream: "rollup-plugin-node-polyfills/polyfills/stream",
        path: "rollup-plugin-node-polyfills/polyfills/path",
        querystring: "rollup-plugin-node-polyfills/polyfills/qs",
        punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
        url: "rollup-plugin-node-polyfills/polyfills/url",
        http: "rollup-plugin-node-polyfills/polyfills/http",
        https: "rollup-plugin-node-polyfills/polyfills/http",
        os: "rollup-plugin-node-polyfills/polyfills/os",
        assert: "rollup-plugin-node-polyfills/polyfills/assert",
        constants: "rollup-plugin-node-polyfills/polyfills/constants",
        _stream_duplex:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
        _stream_passthrough:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
        _stream_readable:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
        _stream_writable:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
        _stream_transform:
          "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
        timers: "rollup-plugin-node-polyfills/polyfills/timers",
        console: "rollup-plugin-node-polyfills/polyfills/console",
        vm: "rollup-plugin-node-polyfills/polyfills/vm",
        zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
        tty: "rollup-plugin-node-polyfills/polyfills/tty",
        domain: "rollup-plugin-node-polyfills/polyfills/domain",
        "react/jsx-dev-runtime": require.resolve("react/jsx-dev-runtime"),
        "react/jsx-runtime": require.resolve("react/jsx-runtime"),
      },
    },
    optimizeDeps: {
      include: ["react/jsx-runtime"],
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: "globalThis",
        },
        // Enable esbuild polyfill plugins
        plugins: [
          esbuildCommonjs(["react-calendar", "react-date-picker", "date-fns"]),
          NodeGlobalsPolyfillPlugin({
            process: true,
            buffer: false,
          }),
          NodeModulesPolyfillPlugin(),
        ],
      },
    },
    build: {
      commonjsOptions: {
        include: [/linked-dep/, /node_modules/],
      },
      rollupOptions: {
        plugins: [nodePolyfills()],
      },
    },
  };
});

We are using "intuit-oauth-ts": "^0.0.4" which has a dependency which adds Buffer polyfill. And with this intuit-oauth-ts our repo is working perfectly with above config.

Now we are trying to add new sdk - statsig-react, which also has a dependency -safer-buffer which is also adding Buffer polyfill and it's creating a conflict - Identifier 'Buffer' has already been declared.

I am providing one minimal reproduction repo here.

Can somebody help here? We have already tried below option it's not working since this issue is at dependency level. We don't won't to switch back to react-scripts.

  NodeGlobalsPolyfillPlugin({
            process: true,
            buffer: false,
          }),

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions