cjs file extension is not supported in vite

[xiaoxiangmoe]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Reproduction

https://github.com/xiaoxiangmoe/vite-exports-and-cjs-bug

git clone ...
yarn install
yarn dev

Open browser

Uncaught ReferenceError: exports is not defined
    at utils-ts.cjs?import:3

Describe the bug

In this demo, we create a package with package.json as below:

{
  "name": "utils-ts",
  "version": "0.1.0-alpha.3",
  "main": "./dist/utils-ts.cjs",
  "exports": {
    ".": {
      "require": "./dist/utils-ts.cjs",
      "default": "./dist/utils-ts.cjs"
    }
  },
}

And vite use pkg.exports['.'].require as entry file.

This has a bug:

• cjs is not supported in vite dev mode

System Info

• vite version: 2.1.2
• Node version:v15.11.0
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.10

[benmccann]

Yep. This is the #1 most hit issue in Vite. This is a duplicate of #2579

[xiaoxiangmoe]

@nihalgonsalves But this is not in ssr. That issue has ssr label.

[nihalgonsalves]

I did some more reading, and this seems like the correct behaviour for module resolution.

The algorithm will look for an import field in the exports, but if it encounters a default first, then that is used

Your package should always specify default last.

---

Here's the algorithm: https://nodejs.org/api/esm.html#esm_resolver_algorithm_specification

This is also outlined in the Webpack docs here

The last condition in the object might be the special "default" condition, which is always matched.

---

You can test this behaviour with esbuild directly:

yarn add esbuild

# try this with with both versions of your package.json, and you will see
# that .cjs is used if the default appears before the import in your exports field
yarn esbuild ./src/main.js --bundle --format=esm

[nihalgonsalves]

Closing due to inactivity. The solution is to order the exports correctly - please comment if you run into further issues.