Sourcemap for "/iframe.html" points to missing source files

[patak-dev]

Describe the bug

@sapphi-red, opening an issue so we can keep track of an issue introduced in 2.9.0-beta.6, and not present in 2.9.0-beta.4, so it should be related to:

• feat: css sourcemap support during dev #7173

Users are seeing logs:

Sourcemap for "/iframe.html" points to missing source files

See storybookjs/builder-vite#288

And

Sourcemap for "/root/Projects/xyz/frontend/index.html" points to missing source files
Sourcemap for "/root/Projects/xyz/frontend/src/App.vue" points to missing source files

See discussion in Vite Land

Reproduction

storybookjs/builder-vite#288

System Info

.

Used Package Manager

pnpm

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 https://github.com/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.

[Ragura]

This issue is also present in the Element Plus Vite Starter template. Hopefully that can help narrow down the cause. You need to visit the devserver in the browser to trigger it.

[sapphi-red]

I digged down a bit and it seems like I have forgot to support inline styles.

I have created a PR with only includes a test case for this. #7434
I'll try to fix it now.

I am not sure about this one. I will take a look after fixing the inline style one.

Sourcemap for "/root/Projects/xyz/frontend/src/App.vue" points to missing source files

[sapphi-red]

@Ragura I was not able to reproduce it. Did you also update @vitejs/plugin-vue to 2.3.0-beta.0?

[Ragura]

@Ragura I was not able to reproduce it. Did you also update @vitejs/plugin-vue to 2.3.0-beta.0?

I hadn't done that yet, but I did now and it still gives me the following output including the 2 source map errors:

3:53:06 PM [vite] ✨ dependencies optimized: vue
3:53:07 PM [vite] ✨ dependencies optimized: element-plus/es, element-plus/es/components/menu/style/index, element-plus/es/components/sub-menu/style/index, element-plus/es/components/menu-item/style/index, element-plus/es/components/date-picker/style/index, ...and 8 more
3:53:07 PM [vite] ✨ previous optimized dependencies have changed, reloading page
Sourcemap for "/Users/me/development/element-plus-vite-starter/src/App.vue" points to missing source files
Sourcemap for "/Users/me/development/element-plus-vite-starter/src/components/HelloWorld.vue" points to missing source files

Fulll package.json dependencies for reference:

"dependencies": {
    "@types/lodash-es": "^4.17.6",
    "element-plus": "^2.1.4",
    "lodash-es": "^4.17.21",
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@types/node": "^17.0.23",
    "@vitejs/plugin-vue": "2.3.0-beta.0",
    "@vue/compiler-sfc": "^3.2.31",
    "sass": "^1.49.9",
    "typescript": "^4.6.2",
    "unplugin-vue-components": "^0.18.3",
    "vite": "2.9.0-beta.7",
    "vue-tsc": "^0.33.5"
  },

[sapphi-red]

Thank you I was able to reproduce it.
It seems like it only happens with cold start.

[patak-dev]

@Ragura would you confirm that vite@2.9.0-beta.8 is working well for you?

[Ragura]

@Ragura would you confirm that vite@2.9.0-beta.8 is working well for you?

Almost. The Element Plus starter template no longer gives the errors. The only source map error remaining is the one for tailwind.css in our production project.

Sourcemap for "/Users/me/development/tutori-frontend/src/styles/tailwind.css" points to missing source files

For reference, the only thing inside that file is the standard Tailwind preflight.

@tailwind base;
@tailwind components;
@tailwind utilities;

[patak-dev]

Thanks for testing @Ragura

As we are discussing in #contributing in Vite Land, we are going to have a new experimental css.devSourcemap option disabled by default for Vite 2.9. So we can move on with the release and continue testing CSS sourcemaps, hopefully removing the experimental status in 3.0 (we can evaluate also the performance implications once more users opt-in to re-evaluate the default then).

[sapphi-red]

This happens with unocss.

Sourcemap for "/__uno.css" points to missing source files
  vite:sourcemap Missing sources:
  vite:sourcemap   /__uno.css +0ms

https://stackblitz.com/edit/vitejs-vite-jrbfg2?file=vite.config.js

Edited: I looks like unocss is not returning sourcemap.

[Myrmod]

I've got a similar issue in vitebook/vitebook#71 and vitebook/vitebook#72.

To reproducce this error you should be able to do the following:

git clone https://github.com/vitebook/vitebook.git
cd vitebook/examples/svelte-kit
pnpm install
pnpm vitebook:dev

The issue can also be observed in https://stackblitz.com/github/vitebook/vitebook/tree/main/examples/svelte-kit?file=package.json

[sapphi-red]

@Myrmod I am not sure but I feel vitebook is not returning sourcemaps. But I cannot debug because I am using windows (vitebook/vitebook#20).
BTW This message is just a warning so even if this message is shown, vite is working. So it is not related to vitebook not working.

[sapphi-red]

Closing as Vitebook seems to upgrade to Vite 3 and includes many changes and it seems to be fixed.