Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upstream CSS files with embedded sourceMappingURL are loaded from wrong location #8411

Closed
7 tasks done
intgr opened this issue May 31, 2022 · 3 comments · Fixed by #10705
Closed
7 tasks done

Upstream CSS files with embedded sourceMappingURL are loaded from wrong location #8411

intgr opened this issue May 31, 2022 · 3 comments · Fixed by #10705
Labels
feat: css p2-nice-to-have Not breaking anything but nice to have (priority)

Comments

@intgr
Copy link

intgr commented May 31, 2022

Describe the bug

I'm including this file in my project: https://github.com/twbs/bootstrap/blob/v5.1.3/dist/css/bootstrap.min.css (as import 'bootstrap/dist/css/bootstrap.min.css';)

This file includes an embedded comment /*# sourceMappingURL=bootstrap.min.css.map */

When running with Vite dev server and opening it in Chrome, I always get a warning in dev console:

DevTools failed to load source map: Could not load content for https://vitejs-vite-sfhie6--3000.local.webcontainer.io/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

e.g. https://vitejs-vite-sfhie6--3000.local.webcontainer.io/ with dev tools open.

Since Vite injects some magic into the CSS, I think Chrome no longer knows the relative path where to load the source map? I guess Vite should rewrite the URL in sourceMappingURL= as well.

No such warning with Firefox.

Reproduction

https://stackblitz.com/edit/vitejs-vite-sfhie6?file=main.js

System Info

I provided a repro, should be enough no? https://stackblitz.com/edit/vitejs-vite-sfhie6?file=package.json

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red sapphi-red added feat: css p2-nice-to-have Not breaking anything but nice to have (priority) and removed pending triage labels May 31, 2022
@septatrix
Copy link

I also stumbled upon this today. My attempts at somehow solving this with manual import or linking inside the public/ did not bear fruit so I would be very happy to have this resolved (or at least get shown some workaround)

@flys1ck
Copy link

flys1ck commented Jul 14, 2022

As a temporary workaround to silence this warning you can set css.devSourcemap to true in your vite config (https://vitejs.dev/config/shared-options.html#css-devsourcemap).

css: {
  devSourcemap: true,
},

This will inline the source map into the source map comment sourceMappingURL= in your css file and won't make an extra request to the source map file. Keep in mind, that this feature is still experimental and might come with a performance penalty.

@stoffpalette
Copy link

stoffpalette commented Sep 21, 2022

same error here.

i am using gridjs 5.1.0 inside a laravel 9.31 installation (on sail) with vite 3.0.9

when i set css.devSourcemap to true console reports on load:
Sourcemap for "/var/www/html/node_modules/gridjs/dist/theme/mermaid.css" points to missing source files

when i do not use css.devSourcemap, the browser console (chrome 105.0.5195.127) reports:
DevTools failed to load source map: Could not load content for http://localhost/mermaid.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

i am importing the css-file via import "gridjs/dist/theme/mermaid.css";

mermaid.css last line:
/*# sourceMappingURL=mermaid.css.map */

mermaid.css.map is located in the same subfolder of the module as mermaid.css.

sapphi-red added a commit to sapphi-red/vite that referenced this issue Oct 29, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Nov 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants