Vite is seemingly creating empty/junk source maps when optimizing dependencies

[rschristian]

Describe the bug

When running a very basic Preact app (see reproduction), in FireFox (perhaps elsewhere too, unsure), users see warnings of No sources are declared in this source map and indeed, the optimized dependencies have empty generated source maps.

Warning & Source Map

Source map error: No sources are declared in this source map.
Resource URL: http://localhost:3000/node_modules/.vite/deps/preact.js?v=2552327c
Source Map URL: preact.js.map

Repeat this warning then for every dependency

node_modules/.vite/deps/preact.js.map

{
  "version": 3,
  "sources": [],
  "sourcesContent": [],
  "mappings": "",
  "names": []
}

I see nothing at this time that indicates an issue with Preact's source maps (and in fact, I see this same issue for modules that have no build step and, ergo, no source maps) though even if there was (and I'll keep looking), generating empty source maps like this creates a lot of noise with no value; I'd prefer if no source map was created at all at that point. Seeing 15 warnings of empty source maps is not very helpful.

Potentially related to #7767

Reproduction

https://stackblitz.com/edit/vitejs-vite-xbgtoq?file=src%2Fmain.jsx

Steps to reproduce

1. Run npm install && npm run dev
2. Run open node_modules/.vite/deps/preact.js.map
3. See empty source map

System Info

System:
    OS: Linux 6.9 EndeavourOS
    CPU: (4) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 3.44 GB / 11.65 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.2.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.1 - /usr/bin/npm
    pnpm: 9.3.0 - /usr/bin/pnpm
  Browsers:
    Chromium: 125.0.6422.141
  npmPackages:
    vite: ^5.2.2 => 5.3.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-xbgtoq (Open reproduction)

[bishonen]

Facing the same issue. Seems to appear randomly - closing and re-opening firefox leads to the warning being gone for some time. Anyone had some luck investigating what's the issue here?

From my project (which I can't share), it seems that vite might have a bad time if a dependencies code is imported - it then creates an empty sourceMap.

E.g.

CalendarSolid.js

import {
  CalendarSolid_default
} from "./chunk-TIHTYKJ6.js";
import "./chunk-47S77ZDT.js";
import "./chunk-UZRQJUKJ.js";
import "./chunk-NKBGLYTV.js";
import "./chunk-PLDDJCW6.js";
export {
  CalendarSolid_default as default
};

CalendarSolid.js.map

{
  "version": 3,
  "sources": [],
  "sourcesContent": [],
  "mappings": "",
  "names": []
}

My understanding is that CalendarSolid's source code is bundled with other components as part of some optimization, as that component is used a Component from the package, which I'm importing it from.
E.g. if material-ui has an icon and another component which uses that icon, vite might bundle both in the same file. Then, it still creates the sourceMap for the icon, but that is empty.

I was able to confirm this, by removing the import of that icon from within the package in which it lives, and at that point, vite had no troubles creating the sourceMap (as the source code for the icon, was present in the CalendarSolid.js file).

[yukulele]

I face the same issue when I import a .json or an ?inline.

Example:

const data = await import('./data.json')
const info = await import('./info.txt?inline')

giving empty sources sourcemaps:

{"version":3,"file":"data-wlzQ5Jg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

{"version":3,"file":"info-CYq4RkKC.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

which makes some browsers generate a "No sources are declared in this source map" warning for each involved file

[hi-ogawa]

It looks like "empty" source map is coming from esbuild's code splitting bundle. Here is a similar output from esbuild.build bundling preact and preact/jsx-runtime https://stackblitz.com/edit/vitejs-vite-hnxiah?file=dist%2Fesbuild%2Fpreact.js.map

The original code from preact is essentially moved to a common chunk of preact and preact/jsx-runtime, so there's nothing to map from dist/esbuild/preact.js output. Esbuild is generating an "empty" source map preact.js.map for this case.

Interestingly, when I use rolldown to bundle preact and preact/jsx-runtime, it doesn't generate preact.js.map at all https://stackblitz.com/edit/vitejs-vite-hnxiah?file=dist%2Frolldown%2Fpreact.js, so this might be something esbuild should handle.

---

@yukulele Json and text import source map is not from esbuild, so that's a different issue. Can you open a separate issue with a reproduction?

[AJR07]

Any fix for this? I am having this issue with React v18 and Vite v5.4

[GrimzEcho]

I've resorted to turning off source maps in Firefox (dev console --> debugger tab --> settings/gear --> source maps) and only enabling them when I need to actually hit breakpoints and debug in the browser.