JS browser context not working for MDX

[kami4ka]

Hello, guys.
I've created a simple Base64 encoder component to use in my md documentation.

The component is the following:

import React, {useState} from 'react';
import styles from './styles.module.css';

const PLACEHOLDER = '// Enter text to encode here'

function Base64Encoder({children, minHeight, url}) {
    const [jsInput, setJSInput] = useState('');
    return (
        <div>
            <textarea placeholder={PLACEHOLDER} onChange={event => setJSInput(event.target.value) } rows={5} className={styles.input}/>
            <textarea readOnly value={btoa(unescape(encodeURIComponent(jsInput)))} rows={5} className={styles.output}/>
        </div>
    );
}

export default Base64Encoder;

Everything is ok while using with npm start but while npm run build the error is the following:

ReferenceError: btoa is not defined

What I'm doing wrong? How to fix it?
Thanks in advance.

[kami4ka]

The reason is in the btoa implementation.
I've used the following one: https://github.com/jsdom/abab

[slorber]

btoa is probably unsupported by nodejs, and fails the build process.
It's not really a mdx problem, the same would happen in your homepage

If you don't care about that Base64 string being SEO-indexed, you could only render it on the server, using our <BrowserOnly> component:
https://v2.docusaurus.io/docs/next/docusaurus-core#browseronly

Or you'd have to use a lib that supports SSR (node + browser), or build it yourself