fix(build): silence warn dynamic import module when inlineDynamicImports true (#13970)

Author: Disservin

packages/vite/src/node/plugins/reporter.ts

@@ -119,30 +119,33 @@ export function buildReporterPlugin(config: ResolvedConfig): Plugin {
       compressedCount = 0
     },
 
-    renderChunk(code, chunk) {
-      for (const id of chunk.moduleIds) {
-        const module = this.getModuleInfo(id)
-        if (!module) continue
-        // When a dynamic importer shares a chunk with the imported module,
-        // warn that the dynamic imported module will not be moved to another chunk (#12850).
-        if (module.importers.length && module.dynamicImporters.length) {
-          // Filter out the intersection of dynamic importers and sibling modules in
-          // the same chunk. The intersecting dynamic importers' dynamic import is not
-          // expected to work. Note we're only detecting the direct ineffective
-          // dynamic import here.
-          const detectedIneffectiveDynamicImport = module.dynamicImporters.some(
-            (id) => !isInNodeModules(id) && chunk.moduleIds.includes(id),
-          )
-          if (detectedIneffectiveDynamicImport) {
-            this.warn(
-              `\n(!) ${
-                module.id
-              } is dynamically imported by ${module.dynamicImporters.join(
-                ', ',
-              )} but also statically imported by ${module.importers.join(
-                ', ',
-              )}, dynamic import will not move module into another chunk.\n`,
-            )
+    renderChunk(code, chunk, options) {
+      if (!options.inlineDynamicImports) {
+        for (const id of chunk.moduleIds) {
+          const module = this.getModuleInfo(id)
+          if (!module) continue
+          // When a dynamic importer shares a chunk with the imported module,
+          // warn that the dynamic imported module will not be moved to another chunk (#12850).
+          if (module.importers.length && module.dynamicImporters.length) {
+            // Filter out the intersection of dynamic importers and sibling modules in
+            // the same chunk. The intersecting dynamic importers' dynamic import is not
+            // expected to work. Note we're only detecting the direct ineffective
+            // dynamic import here.
+            const detectedIneffectiveDynamicImport =
+              module.dynamicImporters.some(
+                (id) => !isInNodeModules(id) && chunk.moduleIds.includes(id),
+              )
+            if (detectedIneffectiveDynamicImport) {
+              this.warn(
+                `\n(!) ${
+                  module.id
+                } is dynamically imported by ${module.dynamicImporters.join(
+                  ', ',
+                )} but also statically imported by ${module.importers.join(
+                  ', ',
+                )}, dynamic import will not move module into another chunk.\n`,
+              )
+            }
           }
         }
       }

playground/dynamic-import-inline/__tests__/dynamic-import-inline.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { isBuild, serverLogs } from '~utils'
+
+test.runIf(isBuild)(
+  'dont warn when inlineDynamicImports is set to true',
+  async () => {
+    const log = serverLogs.join('\n')
+    expect(log).not.toContain(
+      'dynamic import will not move module into another chunk',
+    )
+  },
+)

playground/dynamic-import-inline/index.html

@@ -0,0 +1 @@
+<script type="module" src="./src/index.js"></script>

playground/dynamic-import-inline/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@vitejs/test-dynamic-import-inline",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  }
+}

playground/dynamic-import-inline/src/foo.js

@@ -0,0 +1,3 @@
+export default function foo() {
+  return 'foo'
+}

playground/dynamic-import-inline/src/index.js

@@ -0,0 +1,9 @@
+import foo from './foo'
+
+const asyncImport = async () => {
+  const { foo } = await import('./foo.js')
+  foo()
+}
+
+foo()
+asyncImport()

playground/dynamic-import-inline/vite.config.js

@@ -0,0 +1,18 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'alias'),
+    },
+  },
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+  },
+})