Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Nikunj1729 opened this issue Sep 22, 2023 · 0 comments

Comments

@Nikunj1729
Copy link

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,
          }),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant