Vite: importing @remix-run/dev/server-build doesn't work

[hi-ogawa]

Reproduction

Based on the question asked on the discord, I created a reproduction:

• discord https://discord.com/channels/770287896669978684/1176819205362942023/1176819205362942023
• reproduction https://stackblitz.com/edit/remix-run-remix-hyehkg?file=app%2Froutes%2Fsitemap%5B.%5Dxml.tsx
• @nasa-gcn/remix-seo package: https://github.com/nasa-gcn/remix-seo

Currently @remix-run/dev/server-build is not exposed yet, but I think it's accessible from virtual:server-entry:

// NOT OK
import * as build from '@remix-run/dev/server-build';

// OK
import * as build from 'virtual:server-entry';

The error looks like this:

[vite] Error when evaluating SSR module /app/routes/sitemap[.]xml.tsx: failed to import "@remix-run/dev/server-build"
|- Error: @remix-run/dev/server-build is not meant to be used directly from node_modules. It exists to provide type definitions for a virtual module provided by the Remix compiler at build time.
    at Object.eval (/home/projects/remix-run-remix-hyehkg/node_modules/@remix-run/dev/server-build.js:15:7)
   ...

System Info

From stackblitz:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.3.1 
    @remix-run/eslint-config: * => 2.3.1 
    @remix-run/node: * => 2.3.1 
    @remix-run/react: * => 2.3.1 
    @remix-run/serve: * => 2.3.1 
    vite: ^5.0.0 => 5.0.2

Used Package Manager

npm

Expected Behavior

@remix-run/dev/server-build should work same as before on Vite.

Actual Behavior

@remix-run/dev/server-build doesn't work on Vite.

[hi-ogawa]

Though I initially thought this use case is important, I started to feel such inherently circular nature of server build usage might not be recommended.

For this specific use case of remix-seo, I think more "sound" way to provide sitemap feature would be to post-process server build output to generate sitemap offline and then use it as a static asset.
I included this approach in the repro and I think this approach might suffice for most of the cases.

https://stackblitz.com/edit/remix-run-remix-ndtuuf?file=generate-sitemap.mjs

// Usage:
//   npm run build
//   node generate-sitemap.mjs > public/sitemap.xml

import * as build from "./build/index.js";
import { getSitemapXml } from "@nasa-gcn/remix-seo/build/sitemap/utils.js";

const sitemap = await getSitemapXml(
  new Request("https://dummy.local"),
  build.routes,
  {
    siteUrl: "https://dummy.local"
  }
);
console.log(sitemap);

[pcattori]

We don't have plans to support @remix-run/dev/server-build virtual module with Vite. Instead, Remix will exposes the server build module ID directly (#8120).

But if you wanted to get a programmatic reference to the build (not the build module ID), you can dynamically import it:

let build = await import("./build/server/index.js")

We should also emit ./build/server/index.d.ts alongside the server build so that you get types out-of-the-box when importing the server build.