Base manifest path is combined with the key

[austins]

Vite.AspNetCore v1.8.0

This could just be a configuration issue, but if not, it seems like the Base setting used for manifest base path shouldn't be combined with the key of the chunk in ViteManifest or the base isn't used when accessing the key from the manifest in the tag helper.

Issue Details

appsettings.json:

{
  "Vite": {
    "Base": "./assets",
    "Manifest": "manifest.json"
  }
}

_Layout.cshtml:

    <link rel="stylesheet" vite-href="~/app.ts" asp-append-version="true"/>
    <script type="module" vite-src="~/app.ts" asp-append-version="true"></script>

vite.config.ts:

{
        appType: "custom",
        base: "./", // This is for css files to have the right relative url to any fonts.
        root: "./Assets",
        server: {
            port: appsettingsDev.Vite.Server.Port,
            strictPort: true,
            https: {cert: certificatePath, key: keyPath},
            hmr: {clientPort: appsettingsDev.Vite.Server.Port}
        },
        build: {
            outDir: "../wwwroot/assets",
            emptyOutDir: true,
            assetsDir: "",
            manifest: appsettings.Vite.Manifest,
            rollupOptions: {
                input: "./Assets/app.ts",
                output: {
                    entryFileNames: "[name].js",
                    chunkFileNames: "[name]-[hash].js",
                    assetFileNames: "[name][extname]"
                }
            },
        }
    }

This config allows Vite build to ./wwwroot/assets like pictured below:

With this config, the resulting manifest.json is:

{
  "../node_modules/.pnpm/@fontsource+roboto-condensed@5.0.5/node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff": {
    "file": "roboto-condensed-latin-400-normal.woff",
    "src": "../node_modules/.pnpm/@fontsource+roboto-condensed@5.0.5/node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff"
  },
  "../node_modules/.pnpm/@fontsource+roboto-condensed@5.0.5/node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff2": {
    "file": "roboto-condensed-latin-400-normal.woff2",
    "src": "../node_modules/.pnpm/@fontsource+roboto-condensed@5.0.5/node_modules/@fontsource/roboto-condensed/files/roboto-condensed-latin-400-normal.woff2"
  },
  "../node_modules/.pnpm/@fontsource+roboto-mono@5.0.5/node_modules/@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff": {
    "file": "roboto-mono-latin-400-normal.woff",
    "src": "../node_modules/.pnpm/@fontsource+roboto-mono@5.0.5/node_modules/@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff"
  },
  "../node_modules/.pnpm/@fontsource+roboto-mono@5.0.5/node_modules/@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2": {
    "file": "roboto-mono-latin-400-normal.woff2",
    "src": "../node_modules/.pnpm/@fontsource+roboto-mono@5.0.5/node_modules/@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-italic.woff": {
    "file": "roboto-latin-400-italic.woff",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-italic.woff"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-italic.woff2": {
    "file": "roboto-latin-400-italic.woff2",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-italic.woff2"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff": {
    "file": "roboto-latin-400-normal.woff",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2": {
    "file": "roboto-latin-400-normal.woff2",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff": {
    "file": "roboto-latin-700-normal.woff",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff"
  },
  "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff2": {
    "file": "roboto-latin-700-normal.woff2",
    "src": "../node_modules/.pnpm/@fontsource+roboto@5.0.5/node_modules/@fontsource/roboto/files/roboto-latin-700-normal.woff2"
  },
  "../node_modules/.pnpm/htmx.org@1.9.3/node_modules/htmx.org/dist/ext/head-support.js": {
    "file": "head-support-5c66e606.js",
    "isDynamicEntry": true,
    "src": "../node_modules/.pnpm/htmx.org@1.9.3/node_modules/htmx.org/dist/ext/head-support.js"
  },
  "_htmx.min-f5bfe0ce.js": {
    "file": "htmx.min-f5bfe0ce.js",
    "imports": [
      "app.ts"
    ],
    "isDynamicEntry": true
  },
  "app.css": {
    "file": "app.css",
    "src": "app.css"
  },
  "app.ts": {
    "assets": [
      "roboto-latin-400-normal.woff2",
      "roboto-latin-400-normal.woff",
      "roboto-latin-400-italic.woff2",
      "roboto-latin-400-italic.woff",
      "roboto-latin-700-normal.woff2",
      "roboto-latin-700-normal.woff",
      "roboto-condensed-latin-400-normal.woff2",
      "roboto-condensed-latin-400-normal.woff",
      "roboto-mono-latin-400-normal.woff2",
      "roboto-mono-latin-400-normal.woff"
    ],
    "css": [
      "app.css"
    ],
    "dynamicImports": [
      "_htmx.min-f5bfe0ce.js",
      "../node_modules/.pnpm/htmx.org@1.9.3/node_modules/htmx.org/dist/ext/head-support.js"
    ],
    "file": "app.js",
    "isEntry": true,
    "src": "app.ts"
  }
}

The keys in the manifest will also differ if you have a different root like so:

 root: "./",
 outDir: "./wwwroot/assets",

In this case, Vite generates keys with the folder name like Assets/app.ts.

But to the first example above, in that case, the root is ./Assets, the key would be generated like app.ts. The ViteManifest class combines them string key = Path.Combine(this._base, chunk.Key); so the tag helper would look for key in manifest that will return null.

Since I have emptyOutDir: true, I should want to avoid setting outDir to ./wwwroot as there may be other content such as favicon, file uploads, other static assets like images used in the views, etc.

Proposals

Some ideas:

1. The key should not be combined, but not sure how it affects other configurations (there could be a lot of variables with vite.config.ts).
2. Be able to specify an exact path (within the wwwroot folder) instead of a Base.
3. In the tag helper, make sure the base is combined with the key when retrieving it.

[austins]

I had a look at #21. For vite.config.ts, the base (which can only be absolute, ./ or empty string) seems to only affect Vite's asset paths for things like font urls in css files, but not keys in the manifest. Vite outputs the key based on root which is then relative to where the manifest.json is.

[austins]

Tried setting the Base in appsettings.json to assets (no slashes). Possibly a bug - the key slashes are not normalized.

Base assets/ will work with the tag helpers prefixed with ~/assets/. This whole issue goes away now when dev server isn't running. But with the tag helper set to that path, the dev server can't find the file since it's actually at /.

[Eptagone]

Hello. If you want to use a custom directory, then set the Base option in your app settings and also in your vite.config.ts file like this:

https://github.com/Eptagone/Vite.AspNetCore/issues/21#issuecomment-1586316537

If this doesn't work, please share a reproduction repo.

[austins]

It works. Base option to /assets/, Vite base to /assets/ and link in tag helpers must be prepended with ~/assets/. Thank you!