Issues

Fix for Docusaurus

docusaurus.config.ts

...
const config: Config = {
  ...
  plugins: [
    ...
    async function MMDDocusaurusFix(context, options) {
      return {
        name: "mmd-docusaurus-fix",
        configureWebpack: () => ({
          resolve: {
            fallback: { path: false, fs: false },
            extensions: [".jsx", ".js", ".tsx", ".ts"],
          },
        }),
      };
    },
    ...
  ],
  ...
  } satisfies Preset.ThemeConfig,
};
export default config;

Versions before 1.0.0: render only in the browser

Before 1.0.0, the player set window.MMDLoadDetails on import, so it failed during server rendering and had to be wrapped to run only in the browser. In Docusaurus, use:

TypeScript

MMDPlayerWrapper.tsx

import BrowserOnly from "@docusaurus/BrowserOnly";
import type { MMD as MMDType } from "@arclockproject/mmd-player"; // Remove if on js
export function MMD(props: Parameters<typeof MMDType>) {
  return (
    <BrowserOnly fallback="Loading MMDPlayer...">
      {() => {
        const _MMD = require("@arclockproject/mmd-player").default;
        return <_MMD {...props} />;
      }}
    </BrowserOnly>
  );
}

JavaScript

MMDPlayerWrapper.jsx

import BrowserOnly from "@docusaurus/BrowserOnly";
export function MMD(props) {
  return (
    <BrowserOnly fallback="Loading MMDPlayer...">
      {() => {
        const _MMD = require("@arclockproject/mmd-player").default;
        return <_MMD {...props} />;
      }}
    </BrowserOnly>
  );
}