Remix + Vite build and ServerBuild are incompatible

[hiendaovinh]

Reproduction

1. Setup Remix with vite and cloudflare template

npx create-remix@latest --template remix-run/remix/templates/cloudflare
cd my-remix-app
vim app/root.tsx

2. Add these links

export const links: LinksFunction = () => [
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous",
  },
];

3. Build and test

npm run build
npx tsc --noEmit

System Info

Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
  npmPackages:
    @remix-run/cloudflare: ^2.9.2 => 2.9.2 
    @remix-run/cloudflare-pages: ^2.9.2 => 2.9.2 
    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    vite: ^5.1.0 => 5.2.12

Used Package Manager

npm

Expected Behavior

The tsc command successfully ran.

Actual Behavior

functions/[[path]].ts:8:55 - error TS2322: Type 'typeof import("/tmp/my-remix-app/build/server/index")' is not assignable to type 'ServerBuild | (() => ServerBuild | Promise<ServerBuild>)'.
  Type 'typeof import("/tmp/my-remix-app/build/server/index")' is not assignable to type 'ServerBuild'.
    Types of property 'routes' are incompatible.
      Type '{ root: { id: string; parentId: undefined; path: string; index: undefined; caseSensitive: undefined; module: Readonly<{ __proto__: null; Layout: ({ children }: { children: any; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; default: () => React.ReactElement<...>; links: () => ({ ...; } | {...' is not assignable to type 'ServerRouteManifest'.
        Property '"root"' is incompatible with index signature.
          Type '{ id: string; parentId: undefined; path: string; index: undefined; caseSensitive: undefined; module: Readonly<{ __proto__: null; Layout: ({ children }: { children: any; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; default: () => React.ReactElement<...>; links: () => ({ ...; } | { ...; })...' is not assignable to type 'Omit<ServerRoute, "children">'.
            The types returned by 'module.links()' are incompatible between these types.
              Type '({ rel: string; href: string; crossOrigin?: undefined; } | { rel: string; href: string; crossOrigin: string; })[]' is not assignable to type 'LinkDescriptor[]'.
                Type '{ rel: string; href: string; crossOrigin?: undefined; } | { rel: string; href: string; crossOrigin: string; }' is not assignable to type 'LinkDescriptor'.
                  Type '{ rel: string; href: string; crossOrigin: string; }' is not assignable to type 'LinkDescriptor'.
                    Type '{ rel: string; href: string; crossOrigin: string; }' is not assignable to type 'HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">'.
                      Type '{ rel: string; href: string; crossOrigin: string; }' is not assignable to type 'HtmlLinkProps'.
                        Types of property 'crossOrigin' are incompatible.
                          Type 'string' is not assignable to type '"anonymous" | "use-credentials" | undefined'.

8 export const onRequest = createPagesFunctionHandler({ build });
                                                        ~~~~~

  node_modules/@remix-run/cloudflare-pages/dist/worker.d.ts:39:5
    39     build: ServerBuild | (() => ServerBuild | Promise<ServerBuild>);
           ~~~~~
    The expected type comes from property 'build' which is declared here on type 'createPagesFunctionHandlerParams<any>'


Found 1 error in functions/[[path]].ts:8

[hiendaovinh]

They are actually compatible but the build delivers crossOrigin as string | undefined. Not union const so the tsc compiler is not happy.

const links = () => [
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous"
  }
];