fix(json): load json module error (#6352)

packages/playground/json/index.html

@@ -19,6 +19,9 @@ <h2>Importing as URL</h2>
 <h2>Raw Import</h2>
 <pre class="raw"></pre>
 
+<h2>JSON Module</h2>
+<pre class="module"></pre>
+
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from 'vue/package.json'
@@ -46,6 +49,9 @@ <h2>Raw Import</h2>
   import raw from './test.json?raw'
   text('.raw', raw)
 
+  import moduleJSON from 'json-module'
+  text('.module', JSON.stringify(moduleJSON))
+
   function text(sel, text) {
     document.querySelector(sel).textContent = text
   }

packages/playground/json/json-module/index.json

@@ -0,0 +1,3 @@
+{
+  "hello": "hi"
+}

packages/playground/json/json-module/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "json-module",
+  "version": "0.0.0"
+}

packages/playground/json/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "json-module": "file:./json-module"
   }
 }

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

@@ -728,39 +728,44 @@ export function resolvePackageEntry(
         }
       }
     }
+    entryPoint ||= data.main
+
+    // try default entry when entry is not define
+    // https://nodejs.org/api/modules.html#all-together
+    const entryPoints = entryPoint
+      ? [entryPoint]
+      : ['index.js', 'index.json', 'index.node']
+
+    for (let entry of entryPoints) {
+      // make sure we don't get scripts when looking for sass
+      if (
+        options.mainFields?.[0] === 'sass' &&
+        !options.extensions?.includes(path.extname(entry))
+      ) {
+        entry = ''
+        options.skipPackageJson = true
+      }
 
-    entryPoint = entryPoint || data.main || 'index.js'
-
-    // make sure we don't get scripts when looking for sass
-    if (
-      options.mainFields?.[0] === 'sass' &&
-      !options.extensions?.includes(path.extname(entryPoint))
-    ) {
-      entryPoint = ''
-      options.skipPackageJson = true
-    }
-
-    // resolve object browser field in package.json
-    const { browser: browserField } = data
-    if (targetWeb && isObject(browserField)) {
-      entryPoint = mapWithBrowserField(entryPoint, browserField) || entryPoint
-    }
-
-    entryPoint = path.join(dir, entryPoint)
-    const resolvedEntryPoint = tryFsResolve(entryPoint, options)
+      // resolve object browser field in package.json
+      const { browser: browserField } = data
+      if (targetWeb && isObject(browserField)) {
+        entry = mapWithBrowserField(entry, browserField) || entry
+      }
 
-    if (resolvedEntryPoint) {
-      isDebug &&
-        debug(
-          `[package entry] ${colors.cyan(id)} -> ${colors.dim(
-            resolvedEntryPoint
-          )}`
-        )
-      setResolvedCache('.', resolvedEntryPoint, targetWeb)
-      return resolvedEntryPoint
-    } else {
-      packageEntryFailure(id)
+      const entryPointPath = path.join(dir, entry)
+      const resolvedEntryPoint = tryFsResolve(entryPointPath, options)
+      if (resolvedEntryPoint) {
+        isDebug &&
+          debug(
+            `[package entry] ${colors.cyan(id)} -> ${colors.dim(
+              resolvedEntryPoint
+            )}`
+          )
+        setResolvedCache('.', resolvedEntryPoint, targetWeb)
+        return resolvedEntryPoint
+      }
     }
+    packageEntryFailure(id)
   } catch (e) {
     packageEntryFailure(id, e.message)
   }