Building with Vite vs Rollup - Same config but different outcomes. Why is that?

Question

I am building my web plugin both with Vite (with rollup options) and just stand alone Rollup. Its more for the practice, and eventually I want to keep one bundler in place.

I am having the following problem:

When bundling with Vite, and testing in older browser i.e. Chrome 54 I get the following error:

loader.umd.cjs:1 Uncaught SyntaxError: Unexpected token {

But when I build with the rollup only, this error is not there and I can load the plugin successfully.

I am getting confused on why would that be. Is there anything else I need to set in vite config?

My vite config:

  export default defineConfig({
      build: {
        lib: {
          entry: resolve(__dirname, "src/plugin/index.ts"),
          name: "Loader",
          fileName: "loader",
        },
    
        outDir: "build",
        rollupOptions: {
          plugins: [
            nodeResolve(),
            commonjs(), // Converts CommonJS modules to ES6
            minifyTemplateLiterals(),
            typescript({
              tsconfig: "./tsconfig.json", // Compile TypeScript files
            }),
            babel({
              babelHelpers: "bundled",
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      browsers:
                        "defaults, Chrome >= 54, Firefox >= 63, Edge >= 80, Safari >= 10.1, iOS >= 10.3, Opera >= 56",
                    },
                    useBuiltIns: "usage",
                    corejs: "3.37",
                  },
                ],
              ],
            }),
            terser({
              format: {
                comments: false,
              },
              compress: {
                drop_console: true,
              },
            }),
          ],
        },
      },
      publicDir: false,
    });

My rollup config:

export default [
  {
    input: "./src/plugin/index.ts",
    output: [
      {
        file: "dist/loader.js",
        format: "esm",
      },
      {
        file: "dist/loader.iife.js",
        format: "iife",
        sourcemap: true,
      },
      {
        file: "dist/loader.umd.js",
        format: "umd",
      }
    ],
    plugins: [
  
      resolve(),
      commonjs(), // Converts CommonJS modules to ES6
      image(), // Converts images to base64
      typescript({
        tsconfig: './tsconfig.json' // Compile TypeScript files
      }), 
      json(), // Converts JSON files to ES6
      babel({
        babelHelpers: 'bundled',
        presets: [
          [
            '@babel/preset-env',
            {
                targets: {
                  browsers: 'defaults, Chrome >= 54, Firefox >= 63, Edge >= 80, Safari >= 10.1, iOS >= 10.3, Opera >= 56',
                },
                useBuiltIns: 'entry',
                corejs: "3.37",
            },
          ],
        ]
      }),
      minifyTemplateLiterals(),
      terser({
        format: {
          comments: false,
        },
        compress: {
          drop_console: true,
        }
      }),
    ],
  },
]