Vite fails to build when source maps link to non existing file with error: "ENOENT: no such file or directory"

[raythurnevoid]

Describe the bug

Some packages provide source maps in node_modules, when they do if the source map link to a .ts file and the .ts file is not in the folder, source map resolution will fail with an error like this:
ENOENT: no such file or directory, open 'C:\workspace\m7d\svelte-context-enhanced\website\node_modules\@material\ripple\index.ts'
The worst thing is that the error won't have any stacktrace and because of that it is really hard to debug.

This problem will prevent the project to build, specifically i'm having this problem from https://github.com/sveltejs/kit; the built page fail to load with this error:

I'm working to a solution to this problem and this is what i've come so far: https://github.com/raythurnevoid/vite/commit/f609451ccaaf74a28171a8d567e5aef11f962342

Reproduction

This error can be reproduced in this repository i'm currently working on: https://github.com/raythurnevoid/svelte-context-enhanced/tree/new_website

cd website
npm i
npm run dev

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 9 4900H with Radeon Graphics
    Memory: 18.76 GB / 31.42 GB
  Binaries:
    Node: 16.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.13.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54)
    Internet Explorer: 11.0.19041.1

Used package manager: npm

Logs

Show details (sorry for sass deprecation warnings)

PS C:\workspace\m7d\svelte-context-enhanced\website> npm run dev

> dev
> cross-env NODE_OPTIONS=--async-stack-traces && svelte-kit dev


  SvelteKit v1.0.0-next.115

  network: not exposed
  local:   http://localhost:3000

  Use --host to expose server to other devices on this network


[vite-plugin-svelte] C:/workspace/m7d/svelte-context-enhanced/website/src/routes/index.svelte:8:19 Unused CSS selector "div"
[vite-plugin-svelte] C:/workspace/m7d/svelte-context-enhanced/website/src/routes/index.svelte:10:2 Unused CSS selector "*"
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum))

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
49 │   @return math.max($backLum, $foreLum) / math.min($backLum, $foreLum);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@material\theme\_theme-color.scss 49:11                              contrast()
    node_modules\@material\theme\_theme-color.scss 60:19                              tone()
    node_modules\@material\theme\_theme-color.scss 73:14                              contrast-tone()
    node_modules\@material\theme\_theme-color.scss 115:17                             @forward
    node_modules\@material\theme\_index.scss 1:1                                      @use
    src\styles\_smui-theme.scss 1:1                                                   @use
    node_modules\@svelte-material-ui-test\core\packages\button\src\Button.svelte 2:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($px, 16px)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
76 │   @return $px / 16px * 1rem;
   │           ^^^^^^^^^^
   ╵
    node_modules\@material\typography\_typography.scss 76:11                          px-to-rem()
    node_modules\@material\typography\_typography.scss 117:18                         @use
    node_modules\@material\button\_button.scss 27:1                                   @use
    node_modules\@material\button\styles.scss 23:1                                    @use
    node_modules\@svelte-material-ui-test\core\packages\button\src\Button.svelte 3:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($tracking, $font-size * 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
72 │   @return $tracking / ($font-size * 16) * 1em;
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@material\typography\_typography.scss 72:11                          get-letter-spacing-()
    node_modules\@material\typography\_typography.scss 120:23                         @use
    node_modules\@material\button\_button.scss 27:1                                   @use
    node_modules\@material\button\styles.scss 23:1                                    @use
    node_modules\@svelte-material-ui-test\core\packages\button\src\Button.svelte 3:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($touch-target-height - $component-height, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
90 │   $vertical-margin-value: ($touch-target-height - $component-height) / 2;
   │                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@material\touch-target\_touch-target.scss 90:27                      margin()
    node_modules\@material\button\_button-base.scss 98:5                              static-styles-without-ripple()
    node_modules\@material\button\_button-base.scss 36:3                              static-styles()
    node_modules\@material\button\_button.scss 58:3                                   static-styles()
    node_modules\@material\button\_button.scss 43:3                                   styles()
    node_modules\@material\button\_button.scss 84:3                                   core-styles()
    node_modules\@material\button\styles.scss 25:1                                    @use
    node_modules\@svelte-material-ui-test\core\packages\button\src\Button.svelte 3:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum))

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
49 │   @return math.max($backLum, $foreLum) / math.min($backLum, $foreLum);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules\@material\theme\_theme-color.scss 49:11                              contrast()
    node_modules\@material\theme\_theme-color.scss 60:19                              tone()
    node_modules\@material\theme\_theme-color.scss 73:14                              contrast-tone()
    node_modules\@material\theme\_theme-color.scss 115:17                             @forward
    node_modules\@material\theme\_index.scss 1:1                                      @use
    src\styles\_smui-theme.scss 1:1                                                   @use
    node_modules\@svelte-material-ui-test\core\packages\ripple\src\Ripple.svelte 2:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($radius, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
250 │       top: calc(50% - #{$radius / 2});
    │                         ^^^^^^^^^^^
    ╵
    node_modules\@material\ripple\_ripple.scss 250:25                                 @content
    node_modules\@material\feature-targeting\_feature-targeting.scss 218:5            targets()
    node_modules\@material\ripple\_ripple.scss 249:5                                  radius-unbounded()
    node_modules\@material\ripple\_ripple.scss 49:5                                   core-styles()
    node_modules\@svelte-material-ui-test\core\packages\ripple\src\Ripple.svelte 6:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($radius, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
252 │       left: calc(50% - #{$radius / 2});
    │                          ^^^^^^^^^^^
    ╵
    node_modules\@material\ripple\_ripple.scss 252:26                                 @content
    node_modules\@material\feature-targeting\_feature-targeting.scss 218:5            targets()
    node_modules\@material\ripple\_ripple.scss 249:5                                  radius-unbounded()
    node_modules\@material\ripple\_ripple.scss 49:5                                   core-styles()
    node_modules\@svelte-material-ui-test\core\packages\ripple\src\Ripple.svelte 6:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($radius, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
262 │         top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
    │                                                 ^^^^^^^^^^^
    ╵
    node_modules\@material\ripple\_ripple.scss 262:49                                 @content
    node_modules\@material\feature-targeting\_feature-targeting.scss 218:5            targets()
    node_modules\@material\ripple\_ripple.scss 261:7                                  radius-unbounded()
    node_modules\@material\ripple\_ripple.scss 49:5                                   core-styles()
    node_modules\@svelte-material-ui-test\core\packages\ripple\src\Ripple.svelte 6:2  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($radius, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
264 │         left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
    │                                                   ^^^^^^^^^^^
    ╵
    node_modules\@material\ripple\_ripple.scss 264:51                                 @content
    node_modules\@material\feature-targeting\_feature-targeting.scss 218:5            targets()
    node_modules\@material\ripple\_ripple.scss 261:7                                  radius-unbounded()
    node_modules\@material\ripple\_ripple.scss 49:5                                   core-styles()
    node_modules\@svelte-material-ui-test\core\packages\ripple\src\Ripple.svelte 6:2  root stylesheet

ENOENT: no such file or directory, open 'C:\workspace\m7d\svelte-context-enhanced\website\node_modules\@material\ripple\index.ts'
Error: ENOENT: no such file or directory, open 'C:\workspace\m7d\svelte-context-enhanced\website\node_modules\@material\ripple\index.ts'
Circular dependency: C:\workspace\m7d\svelte-context-enhanced\website\src\routes\index.svelte -> /node_modules/@svelte-material-ui-test/core/packages/button/index.js -> /node_modules/@svelte-material-ui-test/core/packages/button/src/index.js -> /node_modules/@svelte-material-ui-test/core/packages/button/src/dom/index.js -> /node_modules/@svelte-material-ui-test/core/packages/button/src/dom/Button.svelte -> /node_modules/@svelte-material-ui-test/core/packages/ripple/index.js -> /node_modules/@svelte-material-ui-test/core/packages/ripple/src/index.js -> /node_modules/@svelte-material-ui-test/core/packages/ripple/src/Ripple.svelte -> /node_modules/@raythurnevoid/svelte-hooks/index.js?v=e75a24f3 -> /node_modules/@raythurnevoid/svelte-hooks/UseDebounce.svelte -> /node_modules/@raythurnevoid/svelte-hooks/index.js -> /node_modules/@raythurnevoid/svelte-hooks/UseDebounce.svelte

[sodatea]

Will be fixed by #2904

[raythurnevoid]

Will be fixed by #2904

I confirm, it's the same fix i've done myself to fix this in my fork