assetsDir not properly resolved when using basename when using Wrangler

[drewloomer]

Reproduction

https://github.com/drewloomer/remix-run-remix-dqkrza

Clone repo

pnpm i
pnpm build
pnpm start

Open http://localhost:3207/dashboard
See that assets do not load because their path is incorrect

System Info

System:
    OS: macOS 13.6.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 612.96 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.volta/tools/image/node/16.20.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.19.4 - ~/.volta/tools/image/node/16.20.0/bin/npm
    pnpm: 8.1.0 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.123
    Edge: 123.0.2420.81
    Safari: 17.4.1
  npmPackages:
    @remix-run/cloudflare: ^2.8.1 => 2.8.1 
    @remix-run/cloudflare-pages: ^2.8.1 => 2.8.1 
    @remix-run/dev: ^2.8.1 => 2.8.1 
    @remix-run/eslint-config: ^2.8.1 => 2.8.1 
    @remix-run/react: ^2.8.1 => 2.8.1 
    vite: ^5.1.5 => 5.2.8

Used Package Manager

pnpm

Expected Behavior

Assets should be pathed properly, respecting the basename property.

Actual Behavior

Assets do not resolve because they are built into client/assets instead of client/dashboard/assets.

[drewloomer]

Here is my current workaround for this:

import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from '@remix-run/dev';
import { rename, mkdir } from 'node:fs/promises';
import { join } from 'node:path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

import { getLoadContext } from './load-context';

/**
 * Move the assets to inside of `basename` so they resolve properly.
 * We can't use `assetsDir` of "dashboard/assets"
 * because then Remix accidentally paths assets to to
 * "dashboard/dashboard/assets" inside of `server.js`.
 */
const moveAssets = async ({
  assetsDir,
  base,
  outDir,
}: {
  assetsDir: string;
  base: string;
  outDir: string;
}) => {
  const assetsPath = join(outDir, assetsDir);
  const targetAssetsPath = join(outDir, base, assetsDir);
  console.log(`Renaming assets from ${assetsPath} to ${targetAssetsPath}`);
  await mkdir(join(outDir, base));
  await rename(assetsPath, targetAssetsPath);
};

export default defineConfig({
  base: '/dashboard/',
  plugins: [
    remixCloudflareDevProxy({ getLoadContext }),
    remix({
      ignoredRouteFiles: ['**/*.spec.*', '**/*.bspec.*'],
      basename: '/dashboard/',
      manifest: true,
      buildEnd: async ({ viteConfig }) => {
        const {
          base,
          build: { assetsDir, outDir },
        } = viteConfig;
        await moveAssets({ assetsDir, base, outDir });
      },
    }),
    tsconfigPaths(),
  ],
});