Build error on esbuild deps optimization with imports to cjs files inside externalized module

[zhyupe]

Describe the bug

tl;dr: Vite and esbuild are treating files in exterialized module 'external', but rollup is not. This difference causes rollup loads cjs file as esm and throws 'default' is not exported error.

I discovered this issue when working with ahooks. It should happen to all similar scenes.

ahooks has esm imports to files inside lodash, like import debounce from 'lodash/debounce';. However, 'lodash/debounce' is a cjs file which uses module.exports = debounce;. It needs to be compiled to esm for rollup to process.

When setting lodash to external without optimizeDep on build enabled, lodash/debounce is still bundled by rollup. This confirms that external option of rollup is not considering lodash/debounce external even if lodash is external.

When setting lodash to external with optimizeDep on build enabled, Vite (src/node/optimizer/esbuildDepPlugin.ts#L170, src/node/utils.ts#L97) and esbuild (option passed in src/node/optimizer/index.ts#L604, document quoted as below) treat lodash/debounce as external, leaving import statement and cjs file untouched, while rollup not. As a result, rollup loads the cjs file as esm and throws 'default' is not exported error.

(esbuild doc) In addition, if the external path looks like a package path (i.e. doesn't start with / or ./ or ../), import paths are checked to see if they have that package path as a path prefix.

Reproduction

https://github.com/zhyupe/vitejs-bug-20220805

System Info

Stackblitz
  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.0 
    vite: ^3.0.4 => 3.0.4

Used Package Manager

npm

Logs

Click to expand!

vite v3.0.4 building for production...
✓ 16 modules transformed.
'default' is not exported by node_modules/lodash/debounce.js, imported by node_modules/.vite/deps_build-dist/ahooks.js
file: /home/projects/vitejs-vite-vwthzv/node_modules/.vite/deps_build-dist/ahooks.js:937:7
935: // node_modules/ahooks/es/useRequest/src/plugins/useDebouncePlugin.js
936: var import_react9 = __toESM(require_react());
937: import debounce from "lodash/debounce";
            ^
938: var __read3 = function(o, n) {
939:   var m = typeof Symbol === "function" && o[Symbol.iterator];
error during build:
Error: 'default' is not exported by node_modules/lodash/debounce.js, imported by node_modules/.vite/deps_build-dist/ahooks.js
    at error (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:1888:30)
    at Module.error (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:12442:16)
    at Module.traceVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:12801:29)
    at ModuleScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:11453:39)
    at FunctionScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)
    at ChildScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)
    at FunctionScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)
    at ChildScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)
    at TrackingScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)
    at BlockScope.findVariable (file:///home/projects/vitejs-vite-vwthzv/node_modules/rollup/dist/es/shared/rollup.js:6385:38)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[lobo-tuerto]

I have the same case on a new Vite + Vue project.
I installed Tailwind CSS and created a tailwind.config.cjs file for it.

I cannot import the config file because I get an:

Uncaught SyntaxError: The requested module '/app/tailwind.config.cjs?import' does not provide an export named 'default' (at App.vue:3:8)

Renaming to tailwind.config.js doesn't help because then I see the:

[plugin:vite:css] require() of ES Module frontend/tailwind.config.js from frontend/node_modules/tailwindcss/lib/lib/setupTrackingContext.js not supported.

Any ideas/tips on how to work around this for now?