Does Vite utilize @rollup/plugin-commonjs?

[gajus]

Trying to resolve an issue mentioned in this thread

rollup/rollup#4723 (comment)

@lukastaegert has added a new feature to rollup: minChunkSize feature. However, I've not been able to make it work with Vite. Currently, I am suspecting that we are missing @rollup/plugin-commonjs in our Vite configuration, though it is not clear if Vite already somehow employs this plugin (and how to override it).

Part of documentation mentions that this plugin is used:

Dependency pre-bundling only applies in development mode, and uses esbuild to convert dependencies to ESM. In production builds, @rollup/plugin-commonjs is used instead.

https://vitejs.dev/guide/dep-pre-bundling.html

However, inside a Vite project, I don't see this dependency anywhere in the dependency tree.

[patak-dev]

Yes, Vite uses @rollup/plugin-commonjs by default. It can be avoided if you use opt-in deps pre-bundling during build. You can configure it with build.commonjsOptions. You need to check what version of Rollup we are using for the Vite version you are in. We just merged an update for Rollup 3.10, that will be available in the next days in 4.1.0-beta.1

[mivui]

commonjsOptions not work

[qinhua]

build.commonjsOptions is doesn't work, I need pass it manually from the plugins:

plugins: [
      commonjs({
        include: '/node_modules/',
        requireReturnsDefault: 'auto'
      }) as unknown as PluginOption
]

[jdthorpe]

I actually had luck with the build.commonjsOptions. Note that since my Vite app depended on other packages in my monorepo (package-A and package-B) and my monorepo manager installs them with symlinks like ../package-A/ and not ../common/temp/node_modules/, I needed to add patterns to match the co-located packages explicitly, like so:

import {reactRouter} from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import {defineConfig, searchForWorkspaceRoot} from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import resolve from "@rollup/plugin-node-resolve";

export default defineConfig({
  // https://stackoverflow.com/a/74902701/1519199
  server: {
    fs: {
      allow: [searchForWorkspaceRoot(process.cwd()), ".."],
    },
  },
  plugins: [
    resolve(),
    tailwindcss(),
    reactRouter(),
    tsconfigPaths(),
  ],
  build: {
    commonjsOptions: {
      include: [
        /node_modules/,
        /package-A/,
        /package-B/,
      ],
    },
  },
});