Images Url are broken when building with a baseUrl

[MTG2000]

Hi,
I have always used webpack previously but decided to try out snowpack with a test project
I liked it so much this far, but when I came to building & deployment .... problems appeared :(
I have been struggling for hours with an issue related to images paths.
I have a react project, where I have a component that imports images from src/assets folder.
I also have a baseUrl cause my app is hosted at "mtg2000.github.io/my-app", so in the buildOptions I have a "baseUrl":'/my-app/" and it is working for all the js files, but......
all images assets seem to ignore the baseUrl after building.
so in any .png.proxy.js file, the exported file is "/dist/assets/image.png"; when it should be "my-app/dist/assets/image.png"

is this an issue with the bundler ?? or is there another place to put the baseUrl in to work for images ????
please help, cause I have been trying to deploy my app on github pages for the entire day without success.
Thank you in advance 🙏🙏

[FredKSchott]

I can't reproduce in Snowpack latest. In Create Snowpack App (React) I see this:

// input: src/index.jsx
import logo from './logo.svg';

// output: build/_dist_/index.jsx
import logo2 from "./logo.svg.proxy.js";

Can you share what steps I could take to make this change? What does the source import look like, and what does your entire config file look like?

[FredKSchott]

Create Snowpack App uses a relative logo.svg import, but I couldn't reproduce what you were seeing. Can you share exact steps in a CSA app to reproduce?

[FredKSchott]

Oh wait, I do see this now. Fix added to #2707 (commit f48f7c4)

[sebastienbarre]

You rock, will try ASAP.

[gustaff-weldon]

@FredKSchott I have a similar problem with bundle: true, even without baseUrl. The logo.svg
ends up in build/dist/App/logo.svg, but the bundled App file (loaded from index.html via /dist/index.js) still references the logo via ./logo.svg. The component path is missing:

My snowpack.config.mjs looks like this:

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: "/",
    src: '/dist'
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-typescript'
  ],
  optimize: {
    bundle: true,
    target: 'es2015',
  },
};

My code structure:

/src/App/App.tsx:

import React, {useState, useEffect} from 'react';
import logo from './logo.svg';
...
<img src={logo} className="App-logo" alt="logo" />

Build output:

Compiled App in index.js:

Any ideas?

I'm happy to provide a GH repo with the code Here's a link to reproduction repo: https://github.com/gustaff-weldon/snowpack-spike , it is a spike, based on React tutorial with added Typescript

I'm simply testing it with python -m SimpleHTTPServer

[pmkroeker]

I have encountered a similar issue with bundle: true, using snowpack + svelte. Not setting bundle allows the build to complete as expected. This is when using the webpack plugin.

Edit: add using webpack