One post tagged with "client"

Server side build failure is a fairly common and frustrating issue that is encountered when generating documentation sites with tools like Docusaurus. SSR issues typically arise when code that functioned flawlessly in a client-side React app is incorporated on a doc site either as a component or live code block. The problem can typically be traced to dependencies or contexts that the server does not have access to. Often, such issues can be difficult to track down due to the complexities of rollup, babel, webpack, polyfills, transpiling and minifying. Fortunately, two simple bypasses can resolve the majority of such problems.

The first is simply embedding a codesandbox iFrame, which is particulary advised for complex code that uses state, nodejs libraries like crypto. Link a github repository (or subfolder) via https://codesandbox.io/s/github. After opening the sandbox, click the embed button on the upper right side of the window.

The second is to use a plugin like BrowserOnly in conjunction with using require() instead of import.

All code below goes into a .mdx file. The function BrowserOnlyButton returns both the dependencies and code that depends on them. Note how the dot notation is used with require() to specify particular components. Finally, the component can be used in the mdx file simply by adding the jsx tag corresponding to the wrapping function.

import BrowserOnly from '@docusaurus/BrowserOnly';

export function BrowserOnlyButton() {
  return (
    <BrowserOnly fallback={<p>Some Fallback Content</p>}>
      {() => {
const AlgoButton = require('pipeline-ui').AlgoButton; const Pipeline = require('pipeline-ui').Pipeline; return <AlgoButton wallet={Pipeline.init()} />      }}
    </BrowserOnly>
  );
}

<BrowserOnlyButton />