Skip to content

Commit

Permalink
fix(optimizer): fix cjs export interop for webpacked output
Browse files Browse the repository at this point in the history
fix #1830
  • Loading branch information
yyx990803 committed Jan 31, 2021
1 parent 29bec9c commit 4b6ebc3
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 6 deletions.
16 changes: 16 additions & 0 deletions packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
10 changes: 10 additions & 0 deletions packages/playground/optimize-deps/cjs-dynamic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
10 changes: 10 additions & 0 deletions packages/playground/optimize-deps/cjs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
12 changes: 11 additions & 1 deletion packages/playground/optimize-deps/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion packages/playground/optimize-deps/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 1 addition & 3 deletions packages/vite/src/node/optimizer/esbuildDepPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;`
Expand Down
7 changes: 6 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 4b6ebc3

Please sign in to comment.