How to bundle a commonjs in vite?

I am trying to bundle a dependency (named flickity) that uses require, using vite so that I can use it for some client side javascript. I am aware that client side browser doesn't support node's require statements, as such, I am trying to bundle it using vite and essentially converting it to be browser friendly.

vite is using rollup under the hood so I should be able to accomplish this by using @rollup/plugin-commonjs to vite's build options.

Minimal vite.config.js:

import { defineConfig } from "vite";
import { splitVendorChunkPlugin } from "vite";

import { resolve } from "path";

const extensions = [".js", ".jsx", ".ts", ".tsx"];

const root = resolve(__dirname, "src");
const outDir = resolve(__dirname, "docs");

export default defineConfig({
    plugins: [splitVendorChunkPlugin()],

    base: "./",
    publicDir: false,
    mode: "Development",
    root,

    build: {
        target: "es2020",

        outDir,
        emptyOutDir: true,
        rollupOptions: {
            input: {
                main: resolve(root, "script.ts"),
                flickity: resolve(root, "flickity", "flickity.pkgd.min.js"),

                index: resolve(root, "index.html"),
            },
        },

        modulePreload: {
            polyfill: false,
        },

        commonjsOptions: {
            extensions: extensions,
        },
    },

    resolve: {
        extensions: [".cjs", ".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
        mainFields: ["module", "main", "jsnext:main", "browser"],
    },
});

With that tried, it still didn't worked and was still not converting the require statements.

A portion of the output file is included here and as you can see, the require statement is still not converted:

var G=Object.defineProperty;var K=(r,i,c)=>i in r?G(r,i,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[i]=c;var Y=(r,i)=>()=>(i||r((i={exports:{}}).exports,i),i.exports);var A=(r,i,c)=>(K(r,typeof i!="symbol"?i+"":i,c),c);import{a as _,$ as C}from"./vendor-8d31bf49.js";var nt=Y((ot,y)=>{/*!
 * Flickity PACKAGED v2.3.0
 * Touch, responsive, flickable carousels
 *
 * Licensed GPLv3 for open source use
 * or Flickity Commercial License for commercial use
 *
 * https://flickity.metafizzy.co
 * Copyright 2015-2021 Metafizzy
 */(function(r,i){typeof define=="function"&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(c){return i(r,c)}):typeof y=="object"&&y.exports?y.exports=i(r,require("jquery")):r.jQueryBridget=i(r,r.jQuery)})(window,function(i,c){var l=Array.prototype.slice,s=i.console,n=typeof s>"u"?function(){}:function(e)
--------------/* require statement is still here */-------------------------------------------------------------------------------------------------------------------------------^^^

I am porting my project from webpack to vite so I am quite new to this. Could this be a bug on vite? rollup? or there's just something wrong with my configuration?

So it turns out that vite automatically manages the input javascript (commonjs requires for this matter) in order to make it browser friendly. My only problem is that I was using the wrong version of flickity. It currently it should be 2.3.0 but I was using 3.0.0.

There must be some kind of issue with 3.0.0 with regards to its imports. I'd also like to add that you can install the specific version of flickity using:

npm install flickity@2.3.0

or just use the CDN

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>