Images don't load in dev mode

aklinker1 commented 1 year ago

Summary

When running dev mode with vite dev, images don't show up correctly in HTML files. The src attributes need to point to http://localhost:5137/path/to/image, not just /path/to/image. Without the localhost:5137, it's looking for files from the root of the extension, not against the dev server which the URLs are formatted as.

This is only a problem if you have set the vite root to a custom directory.

Environment

  System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 4.52 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.asdf/installs/nodejs/lts/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/lts/.npm/bin/yarn
    npm: 8.15.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox Developer Edition: 111.0
    Safari: 15.6
  npmPackages:
    vite: 3.1.2 => 3.1.2
    vite-plugin-web-extension: workspace:* => 2.0.2

aklinker1 commented 1 year ago

We can fix this by configuring the server.origin to http://127.0.0.1:5173, pointing to the dev server

ccnnde commented 1 year ago

@aklinker1 Hello, the error still exists, and I didn't set the vite root to a custom directory.

assets-error

Environment

  Browsers:
    Chrome: 117.0.5853.0 canary (x86_64)
  npmPackages:
    vite: 4.3.9
    vite-plugin-web-extension: 3.0.9

If I modify the source code in node_modules by changing origin: "http://127.0.0.1:5173" to origin: "http://localhost:5173", the problem will be resolved.

And, the above modifications cannot take effect in vite.config.js. It seems that the server related configuration has been overwritten by this plugin.

aklinker1 commented 1 year ago

@ccnnde Thanks for the report, I've updated the code to use localhost instead of 127.0.0.1. Not sure why I chose 127.0.0.1 for this originally... It just doesn't work on some computers.

See v3.0.10

ccnnde commented 1 year ago

Thank you for the quick fix.

aklinker1 / vite-plugin-web-extension