antfu-collective/vitesse-webext

Invalid assets URL in dev mode

Elliot67 opened this issue · 5 comments

Elliot67 commented

Describe the bug

In development mode, assets inside the src/assets folder cannot be imported from components.

Explanation

Importing an image with <img src="/assets/icon.svg" /> will resolve to <img src="/assets/icon.svg" /> instead of <img src="http://localhost:3303/assets/icon.svg" />.
When the app is builded, the image will resolve to /dist/assets/icon-03081ed2.svg which works.

The provided example inside src/options/Options.vue currently only works because the same file exists in the extension/assets folder.

Note :

  • The same problem also occurs with CSS import : url('/assets/roboto.woff2')

Possible solutions

  • Force Vite to use a full path instead of the relative one for assets
  • Use the <base> tag to http://localhost:3303/ and remove it at build time

Reproduction

Rename src/assets/icon.svg to something else and fix the import inside src/options/Options.vue

System Info

Windows & Chrome

Used Package Manager

yarn

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
chen99-long commented

I have also encountered this problem, how to solve it?

Elliot67 commented

@chen99-long , I worked around the issue by adding the <base href="http://localhost:3303/" /> tag in the <head> of my options & popup html pages. Vite seems to remove the tag at build time but it can create other issues depending on your extension.

I think the proper fix should be done inside the Vite configuration directly.

  • 👍1
chen99-long commented

Thank you very much

sgarcia-dev commented

Facing the same issue at the moment even on a completely new project. @antfu is this a known issue?

QC2168 commented

same issues