Change project to "type": "module" so we can use pure ESM dependencies

package.json

@@ -5,6 +5,7 @@
     "@babel/core": "^7.14.6",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@mdx-js/rollup": "^2.0.0-rc.1",
     "@storybook/addon-actions": "^6.4.8",
     "@storybook/addon-essentials": "^6.4.8",
     "@storybook/addon-links": "^6.4.8",
@@ -21,23 +22,22 @@
     "react-dom": "^17.0.0",
     "react-fela": "^11.6.1",
     "react-head": "^3.4.0",
-    "rehype-slug": "^4.0.1",
+    "rehype-slug": "^5.0.1",
     "storybook-builder-vite": "^0.1.10",
-    "tropical-islands": "^0.1.2",
-    "tropical-scaffold": "^0.1.1",
-    "vite": "^2.4.2",
-    "vite-plugin-mdx": "^3.5.6"
+    "tropical-islands": "^1.0.0",
+    "tropical-scaffold": "^1.0.0",
+    "vite": "^2.4.2"
   },
   "engines": {
     "node": ">=16"
   },
+  "type": "module",
   "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "node server",
-    "build": "yarn build:clientAssets && yarn build:server && node prerender",
+    "build": "yarn build:clientAssets && node prerender",
     "build:clientAssets": "vite build --outDir dist/static",
-    "build:server": "vite --config vite.config.server.js build --outDir dist/server --ssr src/entry-server.jsx",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "page": "tropical-scaffold --type=page",

prerender.js

@@ -1,29 +1,48 @@
-const fse = require('fs-extra')
-const path = require('path')
+import fse from 'fs-extra'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { createServer as createViteServer } from 'vite'
+
+const dir = dirname(fileURLToPath(import.meta.url))
 
 const transformedTemplate = fse.readFileSync(
-  path.resolve(__dirname, 'dist/static/index.html'),
+  resolve(dir, 'dist/static/index.html'),
   'utf-8'
 )
-const { Renderer } = require('./dist/server/entry-server.js')
-
-const renderer = new Renderer(transformedTemplate)
-
-Object.entries(renderer.pages).forEach(([pathname, page]) => {
-  const { body } = renderer.render(pathname)
-  const filePath = `dist/static${page.filePath}.html`
-  fse.outputFileSync(path.resolve(__dirname, filePath), body)
-  console.log('🖨   Prerendered', filePath)
-})
-Object.entries(renderer.feeds).forEach(([pathname, feed]) => {
-  const body = feed(renderer.pages)
-  const filePath = `dist/static${pathname}`
-  fse.outputFileSync(path.resolve(__dirname, filePath), body)
-  console.log('🖨   Prerendered', filePath)
-})
-console.log('🦖  Your static site is ready to deploy from dist/static')
-
-const pkg = require('./package.json')
-if (pkg.tropical.siteHost === 'https://www.example.org') {
-  console.log(`⚠️   Configure tropical.siteHost in package.json, otherwise links in your JSON Feed won't work!`)
+
+async function prerender () {
+  const vite = await createViteServer({
+    server: { middlewareMode: 'ssr' }
+  })
+
+  try {
+    const { Renderer } = await vite.ssrLoadModule('/src/entry-server.jsx')
+    const renderer = new Renderer(transformedTemplate)
+
+    Object.entries(renderer.pages).forEach(([pathname, page]) => {
+      const { body } = renderer.render(pathname)
+      const filePath = `dist/static${page.filePath}.html`
+      fse.outputFileSync(resolve(dir, filePath), body)
+      console.log('🖨   Prerendered', filePath)
+    })
+    Object.entries(renderer.feeds).forEach(([pathname, feed]) => {
+      const body = feed(renderer.pages)
+      const filePath = `dist/static${pathname}`
+      fse.outputFileSync(resolve(dir, filePath), body)
+      console.log('🖨   Prerendered', filePath)
+    })
+    console.log('🦖  Your static site is ready to deploy from dist/static')
+
+    const pkg = JSON.parse(await fse.readFile('./package.json'))
+    if (pkg.tropical.siteHost === 'https://www.example.org') {
+      console.log(`⚠️   Configure tropical.siteHost in package.json, otherwise links in your JSON Feed won't work!`)
+    }
+  } catch (e) {
+    vite.ssrFixStacktrace(e)
+    console.error(e)
+  }
+
+  await vite.close()
 }
+
+prerender()

server.js

@@ -1,7 +1,10 @@
-const fs = require('fs')
-const path = require('path')
-const express = require('express')
-const { createServer: createViteServer } = require('vite')
+import fse from 'fs-extra'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import express from 'express'
+import { createServer as createViteServer } from 'vite'
+
+const dir = dirname(fileURLToPath(import.meta.url))
 
 async function createServer() {
   const app = express()
@@ -14,7 +17,7 @@ async function createServer() {
     const { pathname } = new URL(`${req.protocol}://${req.get('host')}${req.originalUrl}`)
 
     try {
-      const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
+      const template = fse.readFileSync(resolve(dir, 'index.html'), 'utf-8')
       const transformedTemplate = await vite.transformIndexHtml(pathname, template)
       const { Renderer } = await vite.ssrLoadModule('/src/entry-server.jsx')
       const renderer = new Renderer(transformedTemplate)

vite.config.js

@@ -1,16 +1,21 @@
 import { defineConfig } from 'vite'
-import path from 'path'
-import { config } from './vite.config.server'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import react from '@vitejs/plugin-react'
+import mdx from '@mdx-js/rollup'
+import rehypeSlug from 'rehype-slug'
+
+const dir = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
-  plugins: config.plugins,
+  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug] })],
   build: {
-    ...config.build,
+    assetsInlineLimit: 0,
     rollupOptions: {
       input: {
-        client: path.resolve(__dirname, 'index.html'),
+        client: resolve(dir, 'index.html'),
         // We'll never actually use this bundle, but need it to build assets that are only referenced by SSR pages
-        ssrAssetCollector: path.resolve(__dirname, 'src/entry-server.jsx')
+        ssrAssetCollector: resolve(dir, 'src/entry-server.jsx')
       }
     }
   }