submenu-indicator-default.svg missing when using SvelteKit / Vite

[KonradHoeffner]

I can use this library with SvelteKit with the following code and everything works except the submenu indicator, as I get a 404 of http://localhost:5000/assets/submenu-indicator-default.svg when using vite build and then vite preview. Svelte does place it under assets/submenu-indicator-default.80459c67.svg but it does the same thing for the css, which gets combined into assets/index.6986e23f.css, where it somehow works, but it doesn't seem to achieve the same "magic" for the SVG file. How can I get Svelte to find the submenu indicator SVG file?

import contextMenus from "cytoscape-context-menus";
cytoscape.use(contextMenus);
import "cytoscape-context-menus/cytoscape-context-menus.css";
import "cytoscape-context-menus/assets/submenu-indicator-default.svg";

[onsah]

Hi, I didn't use SvelteKit and vite before but this issue seems related to the framework you use rather than this library. If you think it is related to this library please provide more details or propose the solution by yourself by opening a PR.

[KonradHoeffner]

You are right, this was indeed a Vite issue. For other Vite users:

1. Upgrade Vite to at least 2.5.0 (see https://github.com/vitejs/vite/issues/2944)
2. Add the following build options to your vite.config.js:

export default {
    build: {
        rollupOptions: {
            output: {
                assetFileNames: "assets/[name][extname]",
            },
        },
    },
};

This fixed it at least in production mode, in dev mode it is still missing the submenu indicator but that isn't a problem for me.