Build logs filled with warnings in 3.2.0 when relying on external (relative) assets #10766

ScopeyNZ · 2022-11-03T02:09:22Z

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

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.

The text was updated successfully, but these errors were encountered:

ScopeyNZ · 2022-11-03T02:11:21Z

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.

LowArmour · 2022-11-15T21:27:53Z

Encountered the same warning when testing at 3.2.4.
At 3.1.8, the warning does not exist.

jiikoosol · 2022-11-23T10:30:56Z

I'm facing the same problem (3.2.4). Is there some way to fix these warnings?

ianhk · 2022-11-23T10:41:53Z

Same issue, due to this change in 3.2.0 - 9f268da

casperhp · 2022-11-28T19:53:09Z

Getting same error. In react app using semantic-ui-less. Worked in 3.1.8

jiikoosol · 2022-12-30T10:33:19Z

Any news on this one?

elalekey · 2023-01-20T09:36:46Z

Any news?

joinerleal · 2023-01-24T23:19:54Z

facing the same problem

aasen · 2023-01-28T09:45:30Z

I'm having the same issue, is there a way to do this that I have missed?

a1012112796 · 2023-02-24T03:41:47Z

facing the same problem

kiriltaran · 2023-02-26T19:04:00Z

I'm having the same issue

kisekiremi · 2023-03-02T09:22:51Z

facing the same warnings

jeroenheijmans · 2023-03-05T21:20:33Z

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.css to 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 @tailwind directives to style.css from 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

Megrax · 2023-04-13T16:30:19Z

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. 😊

ScopeyNZ · 2023-04-13T22:45:48Z

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.

Megrax · 2023-04-14T02:38:27Z

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

ScopeyNZ added the pending triage label Nov 3, 2022

jeroenheijmans added a commit to jeroenheijmans/repro-vite-build-log-warnings-for-external-assets that referenced this issue Mar 5, 2023

Add README with link to vitejs/vite#10766

84e5645

bluwy added enhancement New feature or request p2-nice-to-have Not breaking anything but nice to have (priority) and removed pending triage labels Mar 12, 2023

fi3ework mentioned this issue Apr 15, 2023

fix(build): do not warn when URL in CSS is externalized #12873

Merged

9 tasks

volta-net bot assigned fi3ework Apr 15, 2023

patak-dev closed this as completed in #12873 Apr 15, 2023

github-actions bot locked and limited conversation to collaborators Apr 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build logs filled with warnings in 3.2.0 when relying on external (relative) assets #10766

Build logs filled with warnings in 3.2.0 when relying on external (relative) assets #10766

ScopeyNZ commented Nov 3, 2022 •

edited

Loading

ScopeyNZ commented Nov 3, 2022

LowArmour commented Nov 15, 2022 •

edited

Loading

jiikoosol commented Nov 23, 2022

ianhk commented Nov 23, 2022

casperhp commented Nov 28, 2022

jiikoosol commented Dec 30, 2022

elalekey commented Jan 20, 2023

joinerleal commented Jan 24, 2023

aasen commented Jan 28, 2023

a1012112796 commented Feb 24, 2023

kiriltaran commented Feb 26, 2023

kisekiremi commented Mar 2, 2023

jeroenheijmans commented Mar 5, 2023

Megrax commented Apr 13, 2023

Reproduction

ScopeyNZ commented Apr 13, 2023

Megrax commented Apr 14, 2023 •

edited

Loading

Build logs filled with warnings in 3.2.0 when relying on external (relative) assets #10766

Build logs filled with warnings in 3.2.0 when relying on external (relative) assets #10766

Comments

ScopeyNZ commented Nov 3, 2022 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

ScopeyNZ commented Nov 3, 2022

LowArmour commented Nov 15, 2022 • edited Loading

jiikoosol commented Nov 23, 2022

ianhk commented Nov 23, 2022

casperhp commented Nov 28, 2022

jiikoosol commented Dec 30, 2022

elalekey commented Jan 20, 2023

joinerleal commented Jan 24, 2023

aasen commented Jan 28, 2023

a1012112796 commented Feb 24, 2023

kiriltaran commented Feb 26, 2023

kisekiremi commented Mar 2, 2023

jeroenheijmans commented Mar 5, 2023

Megrax commented Apr 13, 2023

Reproduction

ScopeyNZ commented Apr 13, 2023

Megrax commented Apr 14, 2023 • edited Loading

ScopeyNZ commented Nov 3, 2022 •

edited

Loading

LowArmour commented Nov 15, 2022 •

edited

Loading

Megrax commented Apr 14, 2023 •

edited

Loading