Build error on esbuild deps optimization with imports to cjs files inside externalized module #9549
Description
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.4Used 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.