fix(optimizer): fix cjs export interop for webpacked output

fix #1830

Author: yyx990803

packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -6,12 +6,28 @@ test('default + named imports from cjs dep (react)', async () => {
   expect(await page.textContent('.cjs button')).toBe('count is 1')
 })
 
+test('named imports from webpacked cjs (phoenix)', async () => {
+  expect(await page.textContent('.cjs-phoenix')).toBe('ok')
+})
+
+test('default import from webpacked cjs (clipboard)', async () => {
+  expect(await page.textContent('.cjs-clipboard')).toBe('ok')
+})
+
 test('dynamic imports from cjs dep (react)', async () => {
   expect(await page.textContent('.cjs-dynamic button')).toBe('count is 0')
   await page.click('.cjs-dynamic button')
   expect(await page.textContent('.cjs-dynamic button')).toBe('count is 1')
 })
 
+test('dynamic named imports from webpacked cjs (phoenix)', async () => {
+  expect(await page.textContent('.cjs-dynamic-phoenix')).toBe('ok')
+})
+
+test('dynamic default import from webpacked cjs (clipboard)', async () => {
+  expect(await page.textContent('.cjs-dynamic-clipboard')).toBe('ok')
+})
+
 test('dedupe', async () => {
   expect(await page.textContent('.dedupe button')).toBe('count is 0')
   await page.click('.dedupe button')

packages/playground/optimize-deps/cjs-dynamic.js

@@ -6,6 +6,16 @@
   const React = (await import('react')).default
   const ReactDOM = await import('react-dom')
 
+  const clip = await import('clipboard')
+  if (typeof clip.default === 'function') {
+    document.querySelector('.cjs-dynamic-clipboard').textContent = 'ok'
+  }
+
+  const { Socket } = await import('phoenix')
+  if (typeof Socket === 'function') {
+    document.querySelector('.cjs-dynamic-phoenix').textContent = 'ok'
+  }
+
   function App() {
     const [count, setCount] = useState(0)
 

packages/playground/optimize-deps/cjs.js

@@ -3,6 +3,16 @@
 // are not statically detectable by @rollup/plugin-commonjs.
 import React, { useState } from 'react'
 import ReactDOM from 'react-dom'
+import { Socket } from 'phoenix'
+import clip from 'clipboard'
+
+if (typeof clip === 'function') {
+  document.querySelector('.cjs-clipboard').textContent = 'ok'
+}
+
+if (typeof Socket === 'function') {
+  document.querySelector('.cjs-phoenix').textContent = 'ok'
+}
 
 function App() {
   const [count, setCount] = useState(0)

packages/playground/optimize-deps/index.html

@@ -2,10 +2,20 @@ <h1>Optimize Deps</h1>
 
 <h2>CommonJS w/ named imports (react)</h2>
 <div class="cjs"></div>
+<h2>CommonJS w/ named imports (phoenix)</h2>
+<div class="cjs-phoenix">fail</div>
+<h2>CommonJS w/ default export (clipboard)</h2>
+<div class="cjs-clipboard">fail</div>
+
 <script type="module" src="./cjs.js"></script>
 
-<h2>CommonJS dynamic import (react)</h2>
+<h2>CommonJS dynamic import default + named (react)</h2>
 <div class="cjs-dynamic"></div>
+<h2>CommonJS dynamic import named (phoenix)</h2>
+<div class="cjs-dynamic-phoenix"></div>
+<h2>CommonJS dynamic import default (clipboard)</h2>
+<div class="cjs-dynamic-clipboard"></div>
+
 <script type="module" src="./cjs-dynamic.js"></script>
 
 <h2>Dedupe (dep in linked & optimized package)</h2>

packages/playground/optimize-deps/package.json

@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "clipboard": "^2.0.6",
+    "dep-cjs-named-only": "link:./dep-cjs-named-only",
     "dep-linked": "link:./dep-linked",
     "dep-linked-include": "link:./dep-linked-include",
-    "dep-cjs-named-only": "link:./dep-cjs-named-only",
+    "phoenix": "^1.5.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "resolve-linked": "0.0.0",

packages/vite/src/node/optimizer/esbuildDepPlugin.ts

@@ -130,9 +130,7 @@ export function esbuildDepPlugin(
         const [imports, exports] = exportsData[id]
         if (!imports.length && !exports.length) {
           // cjs
-          contents +=
-            `import d from "${relativePath}";export default d;` +
-            `\nexport * from "${relativePath}"`
+          contents += `export default require("${relativePath}");`
         } else {
           if (exports.includes('default')) {
             contents += `import d from "${relativePath}";export default d;`

yarn.lock

@@ -2054,7 +2054,7 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
-clipboard@^2.0.0:
+clipboard@^2.0.0, clipboard@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
   integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
@@ -5962,6 +5962,11 @@ periscopic@^2.0.3:
     estree-walker "^2.0.2"
     is-reference "^1.1.4"
 
+phoenix@^1.5.7:
+  version "1.5.7"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.5.7.tgz#86775bc51271e49930fd7d879ec3ec2addd6bf08"
+  integrity sha512-RgVdTRsK5NpnUPkjPyLg9P8qQQvuDaUsazH06t+ARu9EnPryQ7asE76VDjVZ43fqjY/p8er6y6OQb17YViG47g==
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"