Mixing CommonJS and ESM in a Vite monorepo

[Fumler]

We have some files that we use in node + the browser that we would like to keep CommonJS for now as the node tooling we use does not support using ESM for now. And after reading the docs for optimizeDeps I've tried a few things but can't get it to work, so I'm wondering if there is something I am misunderstanding here?

During development, Vite's dev serves all code as native ESM. Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first.

The default dependency discovery heuristics may not always be desirable. In cases where you want to explicitly include/exclude dependencies from the list, use the optimizeDeps config options.

To me this indicates that I should be able to add imports that are CommonJS to optimizeDeps.include or am I misunderstanding the docs?

Example from StackBlitz: https://stackblitz.com/edit/vitejs-vite-swxhbd?file=vite.config.ts

src/App.tsx is where I am importing the CommonJS file. If you open the console you can see the error:

Uncaught ReferenceError: module is not defined

So my assumption was that Vite would transform e.g. module.exports to export default in this case, but it does not, the transform seems to keep the module.exports part:

import {
  __esm,
  __toCommonJS
} from "/node_modules/.vite/deps/chunk-QYDSUZJS.js?v=08537afc";

// src/isomorphic/common.js
var common_exports = {};
var test;
var init_common = __esm({
  "src/isomorphic/common.js"() {
    "use strict";
    test = {
      test: "test",
      test3: "test3"
    };
    module.exports = test;
  }
});

// dep:@cjs_common
var cjs_common_default = (init_common(), __toCommonJS(common_exports));
export {
  cjs_common_default as default
};
//# sourceMappingURL=@cjs_common.js.map

Any guidance here would be greatly appreciated.

[ptrxyz]

I just ran into the same problem.
Did you somehow find a solution to this?

[ptrxyz]

My understanding is that Vite in dev would use esbuild to transpile CJS modules to ESM as long as they are either found during scanning or included in optimizeDeps.

So it should work i assume. At least I would like to know what I misunderstood.

[LukaMoria]

@Fumler
According to my purposes, I found a solution using https://github.com/vite-plugin/vite-plugin-commonjs
This plugin is working only in dev mode. For build time I updated vite.config.
https://stackblitz.com/edit/vitejs-vite-nyc3em?file=vite.config.ts,src%2FApp.tsx,src%2Fisomorphic%2Fcommon.js
Will really appreciate someone provides a solution for how to do this transformation without external plugins only using esbuild.
According to Vite3 we can reuse esbuild configration between build and dev time.

[trekze]

That codepen example doesn't actually work. See error message in the console:

The requested module '/src/isomorphic/common.js' does not provide an export named 'endpoints'

I assumed it did and followed your example. Only when mine started failing did I notice yours also does.

[adrian-gierakowski]

trying to solve the same problem

[gbersac]

Trying to solve the same problem