Skip to main content

22 posts tagged with "TS"

View All Tags

· 5 min read
Roger Jiang

As discussed in prior posts, Docusaurus (2.4.0) relies on react-router-config to statically serve up a monolithic route config object, with EVERY ROUTE for the WHOLE site. This gets stuffed down the client on first page load. There's no code splitting - just big fat TBT surpise for the client - not what'd you'd want for a seamless browsing experience. See for yourself, inspect your own docusaurus site's bundle and it's likely bursting at the seams with plaintext routes.

It's the Docusaurus Way or the Highway​

The best (and only simple) solution is to USE LESS PAGES, LINKS & TAGS.

· 4 min read
Roger Jiang

A Centralized Pain in the Config​

Sadly, Docusaurus 2.4.0 is still stuck in the past - and uses react-router-config - which has pretty much became obsolete since react-router version 4, which released in 2017 (latest version is v6 and docusaurus uses v5).

The end result is that EVERY SITE ROUTE is forced onto the main client bundle, even for the homepage! Maybe you're lucky, and your site only has a few hundred routes with relatively short url paths.

But imagine how this scales for thousands of routes...

· 3 min read
Roger Jiang

In this series, we continue to fix the poorly optimized client js bundles that are needlessly large and significantly add to total blocking time.

I discovered a quirk with prism-react-renderer, where if you do not add to the optional languages config - there is apparently no code-splitting for the base language support - and it ends up injecting every language it supports (regardless of whether it appears in your site) into the final production bundle. Just search for "fuck" in your bundle - and if "brainfuck" exists - you know you got the same problem!

TL;DR - You must add ONE valid prism.languages:string[] to themeConfig (EVEN if you don't need it!)​

· One min read
Roger Jiang
broken Link component when importing as per docs
import React from "react"
import MDXComponents from "@theme-original/MDXComponents"
// DELETE
import { Link, Redirect } from "@docusaurus/router"
// ADD
import { Link, Redirect } from "react-router-dom"
import Image from "@theme/IdealImage"

export default {
  ...MDXComponents,
  Link,
  Redirect,
}

· One min read
Roger Jiang
Docusaurus Build Crashes during SSG phase
[ERROR] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
C:\Users\Z\react-dev\rjdb-map\build\docs\Computer-Science\Computer-Network\Network-Protocol\Bittorrent\torrent\index.html
This will lead to a race-condition and corrupted files on case-insensitive file systems.
C:\Users\Z\react-dev\rjdb-map\build\docs\Computer-Science\Computer-Network\Network-Protocol\Bittorrent\torrent\index.html
C:\Users\Z\react-dev\rjdb-map\build\docs\Computer-Science\Computer-Network\Network-Protocol\Bittorrent\Torrent\index.html
    at checkSimilarFile (C:\Users\Z\react-dev\rjdb-map\node_modules\webpack\lib\Compiler.js:666:11)
    at writeOut (C:\Users\Z\react-dev\rjdb-map\node_modules\webpack\lib\Compiler.js:848:11)
    at C:\Users\Z\react-dev\rjdb-map\node_modules\webpack\lib\util\fs.js:248:3
    at FSReqCallback.oncomplete (node:fs:197:23)
[INFO] Docusaurus version: 2.3.1
Node version: v18.14.1
error Command failed with exit code 1.