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