Internal error: an internal `assert()` failed

Error: [vite-plugin-ssr@0.2.0]
[Internal Failure] You stumbled upon a bug in `vite-plugin-ssr`'s source code (an internal `assert()` failed). This should definitely not be happening, and you should create a new GitHub issue at https://github.com/brillout/vite-plugin-ssr/issues/new that includes this error stack (the error stack is usually enough to debug internal errors). Or reach out on Discord. A fix will be written promptly.
    at Object.normalizePath (node_modules/vite-plugin-ssr/utils/normalizePath.ts:7:3)
    at node_modules/vite-plugin-ssr/html/injectAssets.node.ts:61:36
    at Array.map (<anonymous>)
    at Object.getPageAssets (node_modules/vite-plugin-ssr/html/injectAssets.node.ts:60:27)
    at populatePageContext (node_modules/vite-plugin-ssr/renderPage.node.ts:434:22)
    at renderPageId (node_modules/vite-plugin-ssr/renderPage.node.ts:159:3)
    at renderPage (node_modules/vite-plugin-ssr/renderPage.node.ts:131:20)
    at server/index.ts:53:20

[brillout]

Nice 👌. I added a new docs page https://vite-plugin-ssr.com/i18n.

As for conditional client side dependencies, it’s more a Vite thing so I’ll leave it to the Vite docs which is I believe in a good state in that regard.

[mate-h]

I would like to share my findings with anyone who might come across the common issues when adding SSR support to their own site. I will describe my experience while adding SSR support to an early stage production site.

Conditional client side dependencies

Here is how to conditionally import client side dependencies and components.

let clientSideDependency = { serverMock: true };
let ClientSideComponent = ({children}) => <div>{children}</div>;

// If browser context, not in a NodeJS SSR context
if (!import.meta.env.SSR) {
  import("client-side-dependency").then(module => clientSideDependency = module.default)
  import("client-side-component").then(module => ClientSideComponent = module.default)
}

Combining vite-plugin-ssr and ssr-window may be a good temporary drop-in solution if you don’t feel like refactoring everything at once for a large codebase. Some third party libraries may depend on the DOM this way too, like editorjs, and so they do not support SSR unless you include this snippet.

import { ssrWindow, ssrDocument } from "ssr-window";

// In a NodeJS Context
globals.window = ssrWindow;
globals.document = ssrDocument;

SSR language support

When a page is being rendered by the server, a client may specify an Accept-Language: es header, a ?lang=es query parameter, a domain TLD domain.es, or a path segment domain.com/es. These parameters will control which language the page renders in. This can also be done at build time with a CI script, where each pre-rendered build output goes into its own language “folder”. e.g. domain.com/en/contact, domain.com/es/contacto, or they will be deployed onto separate application domains, e.g. domain.com/contact, domain.es/contacto. Here is how I added support for this in code.

server.ts

import parser from "accept-language-parser";

// url part to explicit default language mapping
let urlLanguageConfig = { "https://domain.com/es": "es", "https://domain.com": "en", "https://domain.es": "es" }
const renderPage = createPageRender({ viteDevServer, isProduction, root });
app.get("*", async (req, res, next) => {
  const url = req.originalUrl;
  const foundUrl = Object.keys(urlLanguageConfig).find(k => url.includes(k))
  const defaultLanguage = "en";
  const acceptedLanguages = parser.parse(req.headers["accept-language"]);
  // application language
  let language = defaultLanguage;
  // in order of specificity
  if (acceptedLanguages.length > 0) {
    // perform language matching against supported languages
    language = acceptedLanguages[0].code;
  }
  if (foundUrl) language = urlLanguageConfig[foundUrl];

  const pageContext = {
    url,
    language
  };
  const result = await renderPage(pageContext);
  if (result.nothingRendered) return next();
  res.status(result.statusCode).send(result.renderResult);
});

types.ts

import type { PageContextBuiltIn } from "vite-plugin-ssr/types";
export type PageProps = {};
export type PageContext = PageContextBuiltIn & {
  Page: (pageProps: PageProps) => JSX.Element;
  pageProps: PageProps;
  url: string;
  language: string;
  documentProps?: {
    title?: string;
    description?: string;
  };
};

_default.page.server.tsx

const { documentProps, language: lang } = pageContext;
const title = (documentProps && documentProps.title) || getMsg("document.default-title", lang);
const desc = (documentProps && documentProps.description) || getMsg("document.default-description", lang);

return html`<!DOCTYPE html>
  <html lang="${lang}">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="content-language" content="${lang}">
      <link rel="icon" href="${logoUrl}" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="${desc}" />
      <title>${title}</title>
    </head>
    <body>
      <div id="page-view">${html.dangerouslySkipEscape(pageHtml.html)}</div>
    </body>
  </html>`;