Empty page assets upgrading from v0.3.64 to v0.4.x

Description

Hi guys, I’m using this plugin to create a custom engine capable of render (server side) some pages of different web sites (apps) that are later partial hydrated properly depending on the necessities. The JS library I have chosen is SolidJS.

I’ve been using the v0.3.64 successfully but now trying to upgrade to v0.4.x (currently tested on v0.4.32) I’got some problems with the page assets (also upgraded Vite to v3.1.0).

The problem

I noticed that all the server-side pages returned by the “renderPage” method, have not anymore the links and scripts of the page assets needed to display the page correctly.

Every style imported into the page client entry, the client entry script itself, and also the serialized pageContext are not anymore attached to the page.

🔴 Missing in head

<link rel="stylesheet" type="text/css" href="/assets/Header.491f808b.css">
<link rel="modulepreload" as="script" type="text/javascript" href="/assets/getPage.b45249b9.js">

🔴 Missing in body

<script type="module" src="/assets/apps/app1/pages/home/ home.page.client.tsx.7c3ce049.js"></script>
<script id="vite-plugin-ssr_pageContext" type="application/json">{"pageContext":{"_pageId":"/apps/app1/pages/home/home"}}</script>

Project Structure

I’m following the Domain Driven structure suggested by the documentation, the overall result is something like this:

• apps
  • app1
    • components
      • header
        • Header.tsx
        • Header.scss
      • … other components …
    • pages
      • detail
        • detail.page.client.tsx
        • detail.page.server.tsx
        • detail.page.route.ts
      • home
        • home.page.client.tsx
        • home.page.server.tsx
        • home.page.route.ts
      • … other pages …
      • BasePage.tsx (basic page component used by every xxx.page.server.tsx)
    • styles
      • main.css (the app1 specific style)
  • app2 (same as above)
• lib (common between apps)
  • components
  • interfaces
  • styles
  • types
  • utils
• server (express app stuff)
• package.json
• tsconfig.json
• vite.config.ts

As you can see, I’m not using _default pages neither Page, and every app page has its own server and client entry points (that’s why I’m not using xxx.page.tsx but only xxx.page.server.tsx and xxx.page.client.tsx).

Inside each xxx.page.server.tsx entry point I’m building the page (reusing something like BasePage for header and fonts imports, page utils, …):

home.page.server.tsx (app1) - v0.3.64 and v0.4.32

import { renderToString } from 'solid-js/web';
import { PageContext } from '../../../../lib/types/page-context.type';
import { htmlPage, initPage } from '../../../../lib/utils/page.utils';
import BasePage from '../BasePage';

export { passToClient };
export { onBeforeRender };
export { render };

const { passToClient, onBeforeRender } = initPage();

const render = async (pageContext: PageContext) => {
  const title: string = 'Home Page';
  const description: string = '';

  const pageHtml = renderToString(() => (
    <BasePage title={title} description={description} pageContext={pageContext}>
      <h1> The App1 Home Page! </h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat tempor ex, ac lobortis nulla gravida a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer aliquam tortor vel semper euismod. Fusce eu ultrices augue. Proin vitae porttitor nibh. Curabitur faucibus consequat mi sed imperdiet. Proin eu enim in eros euismod iaculis. Nulla eget massa ut quam fringilla congue. Nullam egestas mi eros. Mauris sed erat rhoncus, consequat diam et, fringilla nunc. Vestibulum blandit id neque non lobortis. Sed sed placerat leo, a pellentesque nibh. Quisque nec imperdiet diam. </p>
    </BasePage>
  ));

  return htmlPage(pageHtml);
};

page.utils.ts (lib) - v0.3.64 and v0.4.32

import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr';

 // reusing pageContext and hooks - now empty for demo purposes
export const initPage = () => {
  const passToClient: any = [];

  const onBeforeRender = () => {
    return {
      pageContext: {},
    };
  };

  return {
    passToClient,
    onBeforeRender,
  };
};

export const htmlPage = (html: string) => escapeInject`<!DOCTYPE html>
  ${dangerouslySkipEscape(html)}`;

Instead, in the client entry, I’m importing every style needed for that page and I’m doing my custom partial hydration

home.page.client.tsx (app1) - v0.4.32

import '../../styles/main.css'
import '../../components/header/Header.scss'

export { render }

async function render(pageContext: any) {
  console.log(pageContext);
  setTimeout(() => alert('Hi! This is the home page script of the App1 running!'), 1000);

  // custom hydration ...
}

Previously it was:

home.page.client.tsx (app1) - v0.3.64

import { getPage } from 'vite-plugin-ssr/client';
import '../../styles/main.css'
import '../../components/header/Header.scss'

const Main = async () => {
  const pageContext = await getPage<any>();
  
  console.log(pageContext);
  setTimeout(() => alert('Hi! This is the home page script of the App1 running!'), 1000);

  // custom hydration ...
};

Main();

Finally in the route file, I’m customizing the routing path of each page of every app

home.page.route.ts (app1) - v0.3.64 and v0.4.32 export default '/app1/home';

detail.page.route.ts (app1) - v0.3.64 and v0.4.32 export default '/app1/detail';

home.page.route.ts (app2) - v0.3.64 and v0.4.32 export default '/app2/home';

detail.page.route.ts (app2) - v0.3.64 and v0.4.32 export default '/app2/detail';

Instead my set of dependencies is:

package.json - v0.4.32

{
  "scripts": {
    "dev": "npm run server",
    "prod": "npm run build && npm run server:prod",
    "build": "vite build",
    "server": "ts-node ./server",
    "server:prod": "cross-env NODE_ENV=production ts-node ./server"
  },
  "dependencies": {
    "@types/express": "^4.17.12",
    "@types/node": "^15.12.1",
    "cross-env": "^7.0.3",
    "express": "^4.18.1",
    "moment-timezone": "^0.5.34",
    "solid-js": "~1.4.2",
    "ts-node": "^9.1.1",
    "typescript": "~4.7.2",
    "vite": "~3.1.0",
    "vite-plugin-solid": "~2.3.0",
    "vite-plugin-ssr": "~0.4.32"
  },
  "devDependencies": {
    "sass": "^1.43.2",
    "vite-plugin-checker": "~0.4.9"
  }
}

Previously: package.json - v0.3.64

{
  "scripts": {
    "dev": "npm run server",
    "prod": "npm run build && npm run server:prod",
    "build": "vite build && vite build --ssr",
    "server": "ts-node ./server",
    "server:prod": "cross-env NODE_ENV=production ts-node ./server"
  },
  "dependencies": {
    "@types/express": "^4.17.12",
    "@types/node": "^15.12.1",
    "cross-env": "^7.0.3",
    "express": "^4.18.1",
    "moment-timezone": "^0.5.34",
    "solid-js": "~1.4.2",
    "ts-node": "^9.1.1",
    "typescript": "~4.7.2",
    "vite": "~2.9.9",
    "vite-plugin-solid": "~2.2.6",
    "vite-plugin-ssr": "~0.3.64"
  },
  "devDependencies": {
    "sass": "^1.43.2",
    "vite-plugin-checker": "~0.4.9"
  }
}

I’m also attaching here the prototype of my application so you can directly test it.

ctf-prototype-09-09-2022.zip

• master branch is working with the v0.3.64
• feature/upgrade-to-04x-version is breaking with the v0.4.32

I thought it can be a bug of the v0.4.x version since previously it was working very well, but I’m happy to know if I’m missing something 😃

This is the compare about the server page returned by the v0.3.64 and v0.4.32:

0.3.x vs 0.4.x.pdf

Let me know if you need more information about this.

Error Stack

No errors during the build and neither at runtime, but the assets are missing in the page returned by the "renderPage" method.

[brillout]

It’s not a minimal reproduction 😃.

See https://antfu.me/posts/why-reproductions-are-required and https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff.

[brillout]

Fix released in 0.3.35.

(In case you are curious: vps was wrongfully treating your pages as “HTML-only”.)

Let me know if you still run into issues (the heuristic changed quite a lot in 0.4).

Btw. in case you(r company) is interested: https://github.com/sponsors/brillout. Any amount is appreciated 😃.