vite
vite copied to clipboard
vitejs
Build logs filled with warnings in 3.2.0 when relying on external (relative) assets
Describe the bug
In my web app, I have many resources (images/fonts) that are hardcoded, but external resources (ie. the machine that builds my app won't have those resources).
After upgrading to 3.2.x, the build log is filled with messages like:
[x] referenced in [y] didn't resolve at build time, it will remain unchanged to be resolved at runtime
(Added in #10331)
The resources are defined in my vite.config file as externals (rollup config), although building the app doesn't actually care about this configuration for css files. Now, whether or not you define the externals in your rollup config, you just get a warning that you can't seem to suppress when you're referencing a resource that the builder doesn't have access to.
Reproduction
https://stackblitz.com/edit/vitejs-vite-u2wnpz?file=vite.config.js
Steps to reproduce
Just running npm run build in the example will show the warning. Uncommenting the externals config makes no difference - I'm not sure if it should.
To reproduce from scratch, you just need to use url('/[file]') in any css file, referencing a resource that might be on your webserver, but not in your project.
System Info
N/A
Used Package Manager
npm
Logs
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] 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.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
Perhaps the build should fail if you haven't explicitly defined these resources as externals somewhere? In my case the externals are configured, as we don't just pull in resources in css files, but JS files too, and the build fails without externals configured.
Encountered the same warning when testing at 3.2.4. At 3.1.8, the warning does not exist.
I'm facing the same problem (3.2.4). Is there some way to fix these warnings?
Same issue, due to this change in 3.2.0 - https://github.com/vitejs/vite/commit/9f268dad2e82c0f1276b1098c0a28f1cf245aa50
Wanted to chip in with some additional info and an extra way to reproduce this. I'm running into it with two specific cases:
-
import '../inter.cssto add the Inter font family - Tailwind arbitrary values including URL's, e.g.
bg-[url('/logo.png')]
See my Stack Overflow question for full details, but the minimal repro I found:
- Follow https://vitejs.dev/guide/ (
npm create vite@latest), pick "Vanilla" - Follow https://tailwindcss.com/docs/guides/vite but skip the Vite creation step (already done) and add the
@tailwinddirectives tostyle.cssfrom the template - Add
class="bg-[url('vite.svg')]"to the<body>tag
For your convenience you can also clone my repository, run npm install, and npm run build on it to see the issue. It should output:
transforming (1) index.html vite.svg referenced in your-git-path/repro-vite-build-log-warnings-for-external-assets/style.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
During vite build, Vite will resolve static resources' urls, look for them, and bundle them into dist/assets/. Like in this example,
Reproduction
https://stackblitz.com/edit/vitejs-vite-u2wnpz?file=vite.config.js
after you execute npm run build, you'll see a javascript.[some_hash].svg file under the dist/assets/ dir. Also, the place where it is referenced, is changed into const c="/assets/javascript.8dac5379.svg".
But if Vite cannot resolve some of the resources, it will print this warning and leave the reference untouched.
[x] referenced in [y] didn't resolve at build time, it will remain unchanged to be resolved at runtime
Like background-image:url(/external-assets/fake.svg) in file dist/assets/index.[some_hash].css, the /external-assets/fake.svg part is exactly the same as in the source code.
These unresolved resources may be remote assets on the server, in @ScopeyNZ's case; while they may also be spelling mistakes like this case.
In the former case, users are aware of what they are doing (unresolved resources are expected). Just ignore these warnings. But in the latter case, a warning like above can give some hints to users when they find their app is unexpectedly missing some assets.
Anyway, Vite doesn't know, it'll print a warning message in case you need it. If your app performs well after build, you can simply ingore them. 😊
I think it would be nice to have an option to tell Vite to ignore them, rather than just having to trawl past dozens of error messages. In cases where you have something generating a stylesheet with hundreds of images, this causes significant bloat to build logs.
My thoughts exactly and I'm willing to look into it. Considering the contribution guide here, it's not recommended to introduce another new option. I'll check if we can make use of the build.rollupOptions.external option or other existed options first.
What do you suggest? @patak-dev