diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts index 3c45287017fb44..d95a6d984cd9aa 100644 --- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts +++ b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts @@ -66,6 +66,12 @@ test('import from dep with .notjs files', async () => { expect(await page.textContent('.not-js')).toMatch(`[success]`) }) +test('dep with dynamic import', async () => { + expect(await page.textContent('.dep-with-dynamic-import')).toMatch( + `[success]` + ) +}) + test('dep with css import', async () => { expect(await getColor('h1')).toBe('red') }) diff --git a/packages/playground/optimize-deps/dep-with-dynamic-import/dynamic.js b/packages/playground/optimize-deps/dep-with-dynamic-import/dynamic.js new file mode 100644 index 00000000000000..ea435dc36b7d48 --- /dev/null +++ b/packages/playground/optimize-deps/dep-with-dynamic-import/dynamic.js @@ -0,0 +1 @@ +export const foo = '[success] dependency with dynamic import' diff --git a/packages/playground/optimize-deps/dep-with-dynamic-import/index.js b/packages/playground/optimize-deps/dep-with-dynamic-import/index.js new file mode 100644 index 00000000000000..68a78d10d6e2d2 --- /dev/null +++ b/packages/playground/optimize-deps/dep-with-dynamic-import/index.js @@ -0,0 +1,4 @@ +export const lazyFoo = async function () { + const { foo } = await import('./dynamic.js') + return foo +} diff --git a/packages/playground/optimize-deps/dep-with-dynamic-import/package.json b/packages/playground/optimize-deps/dep-with-dynamic-import/package.json new file mode 100644 index 00000000000000..81c5d2dda6a62a --- /dev/null +++ b/packages/playground/optimize-deps/dep-with-dynamic-import/package.json @@ -0,0 +1,6 @@ +{ + "name": "dep-with-dynamic-import", + "private": true, + "version": "0.0.0", + "main": "index.js" +} diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html index fc1b83a6b50c65..2be896d00acba9 100644 --- a/packages/playground/optimize-deps/index.html +++ b/packages/playground/optimize-deps/index.html @@ -41,6 +41,9 @@

import * as ...

Import from dependency with .notjs files

+

Import from dependency with dynamic import

+
+

Dep w/ special file format supported via plugins

@@ -88,6 +91,11 @@

Reused variable names

import { notjsValue } from 'dep-not-js' text('.not-js', notjsValue) + import { lazyFoo } from 'dep-with-dynamic-import' + lazyFoo().then((foo) => { + text('.dep-with-dynamic-import', foo) + }) + import { createApp } from 'vue' import { createStore } from 'vuex' if (typeof createApp === 'function' && typeof createStore === 'function') { diff --git a/packages/playground/optimize-deps/package.json b/packages/playground/optimize-deps/package.json index 09c578d684ffe7..2752e691da6fb2 100644 --- a/packages/playground/optimize-deps/package.json +++ b/packages/playground/optimize-deps/package.json @@ -18,6 +18,7 @@ "dep-linked": "link:./dep-linked", "dep-linked-include": "link:./dep-linked-include", "dep-not-js": "file:./dep-not-js", + "dep-with-dynamic-import": "file:./dep-with-dynamic-import", "lodash-es": "^4.17.21", "nested-exclude": "file:./nested-exclude", "phoenix": "^1.6.2", diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index f9d50b13e1885e..932d0f529a7ca3 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/packages/vite/src/node/plugins/importAnalysis.ts @@ -62,6 +62,7 @@ const skipRE = /\.(map|json)$/ const canSkip = (id: string) => skipRE.test(id) || isDirectCSSRequest(id) const optimizedDepChunkRE = /\/chunk-[A-Z0-9]{8}\.js/ +const optimizedDepDynamicRE = /-[A-Z0-9]{8}\.js/ function isExplicitImportRequired(url: string) { return !isJSRequest(cleanUrl(url)) && !isCSSRequest(url) @@ -451,11 +452,16 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { ) if (needsInterop === undefined) { - config.logger.error( - colors.red( - `Vite Error, ${url} optimized info should be defined` + // Non-entry dynamic imports from dependencies will reach here as there isn't + // optimize info for them, but they don't need es interop. If the request isn't + // a dynamic import, then it is an internal Vite error + if (!file.match(optimizedDepDynamicRE)) { + config.logger.error( + colors.red( + `Vite Error, ${url} optimized info should be defined` + ) ) - ) + } } else if (needsInterop) { debug(`${url} needs interop`) if (isDynamicImport) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 58c1ee050f7c26..8c67e12beb5afd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -299,6 +299,7 @@ importers: dep-linked: link:./dep-linked dep-linked-include: link:./dep-linked-include dep-not-js: file:./dep-not-js + dep-with-dynamic-import: file:./dep-with-dynamic-import lodash-es: ^4.17.21 nested-exclude: file:./nested-exclude phoenix: ^1.6.2 @@ -317,6 +318,7 @@ importers: dep-linked: link:dep-linked dep-linked-include: link:dep-linked-include dep-not-js: link:dep-not-js + dep-with-dynamic-import: link:dep-with-dynamic-import lodash-es: 4.17.21 nested-exclude: link:nested-exclude phoenix: 1.6.5