diff --git a/packages/playground/resolve/__tests__/resolve.spec.ts b/packages/playground/resolve/__tests__/resolve.spec.ts
index 0b0f1c7fdc8896..b94be689371b22 100644
--- a/packages/playground/resolve/__tests__/resolve.spec.ts
+++ b/packages/playground/resolve/__tests__/resolve.spec.ts
@@ -89,3 +89,9 @@ test('resolve.mainFields', async () => {
 test('resolve.conditions', async () => {
   expect(await page.textContent('.custom-condition')).toMatch('[success]')
 })
+
+test('resolve package that contains # in path', async () => {
+  expect(await page.textContent('.path-contains-sharp-symbol')).toMatch(
+    '[success]'
+  )
+})
diff --git a/packages/playground/resolve/index.html b/packages/playground/resolve/index.html
index aada0bd1bdd972..a121c5c8a68ca1 100644
--- a/packages/playground/resolve/index.html
+++ b/packages/playground/resolve/index.html
@@ -60,6 +60,9 @@ <h2>resolve.mainFields</h2>
 <h2>resolve.conditions</h2>
 <p class="custom-condition"></p>
 
+<h2>resolve package that contains # in path</h2>
+<p class="path-contains-sharp-symbol"></p>
+
 <script type="module">
   function text(selector, text) {
     document.querySelector(selector).textContent = text
@@ -171,6 +174,9 @@ <h2>resolve.conditions</h2>
 
   import { msg as inlineMsg } from './inline-package'
   text('.inline-pkg', inlineMsg)
+
+  import es5Ext from 'es5-ext'
+  text('.path-contains-sharp-symbol', '[success]')
 </script>
 
 <style>
diff --git a/packages/playground/resolve/package.json b/packages/playground/resolve/package.json
index 37b1c134019e31..4fa70ad1a8b13c 100644
--- a/packages/playground/resolve/package.json
+++ b/packages/playground/resolve/package.json
@@ -16,6 +16,7 @@
     "resolve-custom-condition": "link:./custom-condition",
     "@babel/runtime": "^7.12.5",
     "normalize.css": "^8.0.1",
+    "es5-ext": "0.10.53",
     "resolve-linked": "workspace:*"
   }
 }
diff --git a/packages/vite/src/node/plugins/loadFallback.ts b/packages/vite/src/node/plugins/loadFallback.ts
index ba949dcf64cb15..9867ccbfd106e7 100644
--- a/packages/vite/src/node/plugins/loadFallback.ts
+++ b/packages/vite/src/node/plugins/loadFallback.ts
@@ -10,6 +10,7 @@ export function loadFallbackPlugin(): Plugin {
     name: 'vite:load-fallback',
     async load(id) {
       try {
+        // if we don't add `await` here, we couldn't catch the error in readFile
         return await fs.readFile(cleanUrl(id), 'utf-8')
       } catch (e) {
         return fs.readFile(id, 'utf-8')
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
index 9b8519a43119c0..ce5e457406d6dd 100644
--- a/packages/vite/src/node/plugins/resolve.ts
+++ b/packages/vite/src/node/plugins/resolve.ts
@@ -314,6 +314,24 @@ function tryFsResolve(
   }
 
   let res: string | undefined
+
+  // if we fould postfix exist, we should first try resolving file with postfix. details see #4703.
+  if (
+    postfix &&
+    (res = tryResolveFile(
+      fsPath,
+      '',
+      options,
+      false,
+      targetWeb,
+      preserveSymlinks,
+      options.tryPrefix,
+      options.skipPackageJson
+    ))
+  ) {
+    return res
+  }
+
   if (
     (res = tryResolveFile(
       file,
@@ -330,6 +348,22 @@ function tryFsResolve(
   }
 
   for (const ext of options.extensions || DEFAULT_EXTENSIONS) {
+    if (
+      postfix &&
+      (res = tryResolveFile(
+        fsPath + ext,
+        '',
+        options,
+        false,
+        targetWeb,
+        preserveSymlinks,
+        options.tryPrefix,
+        options.skipPackageJson
+      ))
+    ) {
+      return res
+    }
+
     if (
       (res = tryResolveFile(
         file + ext,
@@ -346,6 +380,22 @@ function tryFsResolve(
     }
   }
 
+  if (
+    postfix &&
+    (res = tryResolveFile(
+      fsPath,
+      '',
+      options,
+      tryIndex,
+      targetWeb,
+      preserveSymlinks,
+      options.tryPrefix,
+      options.skipPackageJson
+    ))
+  ) {
+    return res
+  }
+
   if (
     (res = tryResolveFile(
       file,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 113a451ace0a1f..a81cdb9351485e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -390,6 +390,7 @@ importers:
   packages/playground/resolve:
     specifiers:
       '@babel/runtime': ^7.12.5
+      es5-ext: 0.10.53
       normalize.css: ^8.0.1
       resolve-browser-field: link:./browser-field
       resolve-custom-condition: link:./custom-condition
@@ -399,6 +400,7 @@ importers:
       resolve-linked: workspace:*
     dependencies:
       '@babel/runtime': 7.15.4
+      es5-ext: 0.10.53
       normalize.css: 8.0.1
       resolve-browser-field: link:browser-field
       resolve-custom-condition: link:custom-condition
@@ -3583,6 +3585,13 @@ packages:
   /csstype/3.0.9:
     resolution: {integrity: sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==}
 
+  /d/1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.53
+      type: 1.2.0
+    dev: false
+
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -3899,6 +3908,29 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es5-ext/0.10.53:
+    resolution: {integrity: sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==}
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.0.0
+    dev: false
+
+  /es6-iterator/2.0.3:
+    resolution: {integrity: sha1-p96IkUGgWpSwhUQDstCg+/qY87c=}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.53
+      es6-symbol: 3.1.3
+    dev: false
+
+  /es6-symbol/3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.6.0
+    dev: false
+
   /esbuild-android-arm64/0.13.2:
     resolution: {integrity: sha512-Eh2paXUWYqf5JgikdkC0LnhtjSC8tGAz/L2kJRlMC0o3DzOBIxcmT2fdzBerdhW4roY0bOExfcO6deI1qsxI/A==}
     cpu: [arm64]
@@ -4328,6 +4360,12 @@ packages:
       vary: 1.1.2
     dev: true
 
+  /ext/1.6.0:
+    resolution: {integrity: sha512-sdBImtzkq2HpkdRLtlLWDa6w4DX22ijZLKx8BMPUuKe1c5lbN6xwQDQCxSfxBQnHZ13ls/FH0MQZx/q/gr6FQg==}
+    dependencies:
+      type: 2.5.0
+    dev: false
+
   /extract-zip/2.0.1:
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
     engines: {node: '>= 10.17.0'}
@@ -6426,6 +6464,10 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /next-tick/1.0.0:
+    resolution: {integrity: sha1-yobR/ogoFpsBICCOPchCS524NCw=}
+    dev: false
+
   /nice-try/1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -8493,6 +8535,14 @@ packages:
       mime-types: 2.1.32
     dev: true
 
+  /type/1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: false
+
+  /type/2.5.0:
+    resolution: {integrity: sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==}
+    dev: false
+
   /typedarray-to-buffer/3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
     dependencies: