From 4b6ebc3f3b117cbe45aff55746dd5f588dfe1587 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 31 Jan 2021 14:24:44 -0500 Subject: [PATCH] fix(optimizer): fix cjs export interop for webpacked output fix #1830 --- .../__tests__/optimize-deps.spec.ts | 16 ++++++++++++++++ packages/playground/optimize-deps/cjs-dynamic.js | 10 ++++++++++ packages/playground/optimize-deps/cjs.js | 10 ++++++++++ packages/playground/optimize-deps/index.html | 12 +++++++++++- packages/playground/optimize-deps/package.json | 4 +++- .../vite/src/node/optimizer/esbuildDepPlugin.ts | 4 +--- yarn.lock | 7 ++++++- 7 files changed, 57 insertions(+), 6 deletions(-) diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts index 788eb2b3200891..94a3dc24665101 100644 --- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts +++ b/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') diff --git a/packages/playground/optimize-deps/cjs-dynamic.js b/packages/playground/optimize-deps/cjs-dynamic.js index 6fff0fdf8a8efc..dceffd811772d7 100644 --- a/packages/playground/optimize-deps/cjs-dynamic.js +++ b/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) diff --git a/packages/playground/optimize-deps/cjs.js b/packages/playground/optimize-deps/cjs.js index b016d04c6fa661..196d395edc30a2 100644 --- a/packages/playground/optimize-deps/cjs.js +++ b/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) diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html index 182bbea32bb479..b45bdd61de446f 100644 --- a/packages/playground/optimize-deps/index.html +++ b/packages/playground/optimize-deps/index.html @@ -2,10 +2,20 @@

Optimize Deps

CommonJS w/ named imports (react)

+

CommonJS w/ named imports (phoenix)

+
fail
+

CommonJS w/ default export (clipboard)

+
fail
+ -

CommonJS dynamic import (react)

+

CommonJS dynamic import default + named (react)

+

CommonJS dynamic import named (phoenix)

+
+

CommonJS dynamic import default (clipboard)

+
+

Dedupe (dep in linked & optimized package)

diff --git a/packages/playground/optimize-deps/package.json b/packages/playground/optimize-deps/package.json index 4524278eb90a80..36f7f564b521b8 100644 --- a/packages/playground/optimize-deps/package.json +++ b/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", diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts index 6415d997ae55ea..d709b8243dbfb5 100644 --- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts +++ b/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;` diff --git a/yarn.lock b/yarn.lock index 5565317b87bc25..b0c94b8b06f0c5 100644 --- a/yarn.lock +++ b/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"