Remix sitemap example does not work with Remix+Vite

[684efs3]

I get the 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.

[lpsinger]

Did you intend to open this issue in https://github.com/nasa-gcn/remix-seo?

[684efs3]

Yes, but it looks like there's no way to open an issue there...?

[684efs3]

remix-run/remix#8126

From the Remix team: "Added a remix-run/remix#8122 (comment) stating that we won't be supporting @remix-run/dev/server-build virtual module for Vite"

remix-run/remix#8122 (comment)

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.

[lpsinger]

I might need some help with this one in the form of a PR, as I am not yet familiar with Vite.

[toddheslin]

For anyone wondering, the simple fix for this is this for your sitemap[.]xml.ts file:

import { generateSitemap } from '@nasa-gcn/remix-seo'
import type { LoaderFunctionArgs } from '@remix-run/node'

export async function loader({ request }: LoaderFunctionArgs) {
  //@ts-ignore - This may fail during docker build typecheck if the app isn't build yet
  let build = await (
    import.meta.env.DEV
    ? import("../../build/server/index.js")
    : import(
      /* @vite-ignore */
      import.meta.resolve("../../build/server/index.js"
    )))

  //@ts-ignore - No defs for this
  return generateSitemap(request, build.routes, {
    siteUrl: 'https://buy.loungepair.com',
  })
}

Edit: after writing and submitting this comment I found it worked differently in production. Updated my example here if anyone saw it before the update.

[toddheslin]

Just another note about when using vite. You'll probably end up with an error like:

[commonjs--resolver] Server-only module referenced by client
...
  Remix automatically removes server-code from these exports:
    `loader`, `action`, `headers`
...
See https://remix.run/docs/en/main/future/vite#splitting-up-client-and-server-code

I fixed this using the https://www.npmjs.com/package/vite-env-only package as suggested in the remix docs.
Make sure you set it up in your vite.config.ts file, and then your handle will look like this:

export const handle = {
  getSitemapEntries: serverOnly$(async () => {
    const { airports } = await getLoungesDirectory()
    return airports.map((airport) => {
      return { route: `/at/${airport.iata}/`, priority: 0.8 }
    })
  }),
}

[zifahm]

@toddheslin I tried following what you recommended

I keep getting the same erro while doing the import as well

import { type LoaderFunctionArgs } from "@remix-run/node";

export async function loader({ request }: LoaderFunctionArgs) {
  let build = await import("../../build/server/index.js");
  console.log({ build });
  return null;
  // return generateSitemap(request, routes, {
  //   siteUrl: getDomainUrl(request),
  //   headers: {
  //     "Cache-Control": `public, max-age=${60 * 5}`,
  //   },
  // });
}

Error

@remix-run/dev/server-build is not meant to be used directly from node_modules.

This is really werid I thought importing the build would solve the issue!

[zifahm]

I solved this problem

I had build the version where things was already in error where I imported @remix-run/dev

creating a new buid without importing @remix-run/dev doesnt produce any error anymore

[684efs3]

This works, however, I am using Remix flat routes, and the generated urls in the sitemap will have extra slashes, e.g. https://abc.com///xyz.

I believe this library is assuming that folders like _test+ is a path, when it is not.

Is there a way to remove these? Maybe use a regex to condense any repeated slashes (/) into a single slash?

[toddheslin]

@684efs3 was this working before upgrading to vite? Feels like it is specifically an issue when using this package with remix-flat-routes. But if it's specifically vite, this line of my solution:

  return generateSitemap(request, build.routes, { ...}

shows that you are passing in build.routes. So I'd just map over the routes and change object before it's passed into generateSitemap

[lpsinger]

@toddheslin, would you please share a working sample project with vite and remix-seo? I tried to create one from the remix templates earlier today but didn't get very far.

[684efs3]

@toddheslin This is my first time using this package, and it is with Remix+Vite and remix-flat-routes. I did not use this package in the past.

[lpsinger]

@684efs3 was this working before upgrading to vite? Feels like it is specifically an issue when using this package with remix-flat-routes.

Yes, it is. Here's a working example with remix-seo and remix-flat-routes, but without vite. https://github.com/lpsinger/remix-flat-routes-seo

[zifahm]

@684efs3 was this working before upgrading to vite? Feels like it is specifically an issue when using this package with remix-flat-routes.

Yes, it is. Here's a working example with remix-seo and remix-flat-routes, but without vite. https://github.com/lpsinger/remix-flat-routes-seo

I think what he is trying to say is when he tries to colocate routes with a folder like _text+, there seems to be extra slashes introduced.

In your wroking example, there isnt a folder path created for your routes eg: here _auth+
https://github.com/epicweb-dev/epic-stack/tree/main/app/routes/_auth%2B

@684efs3 This error needs to be posted in the remix-flat-routes isssue tab, not here i suppose