fix: dep with dynamic import wrong error log (#7313)

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')
 })

packages/playground/optimize-deps/dep-with-dynamic-import/dynamic.js

@@ -0,0 +1 @@
+export const foo = '[success] dependency with dynamic import'

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
+}

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"
+}

packages/playground/optimize-deps/index.html

@@ -41,6 +41,9 @@ <h2>import * as ...</h2>
 <h2>Import from dependency with .notjs files</h2>
 <div class="not-js"></div>
 
+<h2>Import from dependency with dynamic import</h2>
+<div class="dep-with-dynamic-import"></div>
+
 <h2>Dep w/ special file format supported via plugins</h2>
 <div class="plugin"></div>
 
@@ -88,6 +91,11 @@ <h2>Reused variable names</h2>
   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') {

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",

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) {