MindBody Branded Web Widgets with React.

Hopefully, this will help someone else out. We sunk more time than we should have to integrate MindBody Branded Web Widget into a client’s React site.

The issue that you will experience is on the first-page load the widgets render correctly. Any further page loads will result in errors that are visible in the console.

Without going too far into the technical weeds the issue is that the healcode javascript loads additional scripts on the page. This causes issues when using react-router to displays different components based on the URL.

The solution is hacky, but until MindBody updates this code there are not many great options to solve this.

The solution in short is to use react error boundaries to catch these errors and perform a browser reload.

Step 1. Create React ErrorBoundary Component

import React, { Component } from 'react'

class ErrorBoundary extends Component {
    constructor(props){
        super(props)
        this.state = { error: null, errorInfo: null }
    }

    componentDidCatch(error, info){
        this.setState({ error: error, errorInfo: info })
        window.location.reload();
    }

    render() {
        if(this.state.errorInfo){
            return (
                <div className="error-boundary">
                    <summary>Something went wrong</summary>
                    <details style={{ whiteSpace: 'pre-wrap' }}>
                        { this.state.error && this.state.error.toString() }
                        { this.state.errorInfo.componentStack }
                    </details>
                </div>
            )
        }
        return this.props.children
    }
}

export default ErrorBoundary;

Step 2. Create MindBody Component

const loadMBody = (callback) => {
    const existingScript = document.getElementById('mindBody');
    if (!existingScript) {
        const script = document.createElement('script');
        script.src = 'https://widgets.mindbodyonline.com/javascripts/healcode.js';
        script.id = 'mindBody';
        script.async = true;
        script.crossorigin = 'anonymous';
        document.body.appendChild(script);
        script.onload = () => {
            if (callback) callback();
        };
    }
    if (existingScript && callback) callback();
};
export default loadMBody;

Step 4. Create Component to Display Widget

import { Container } from '@material-ui/core';
import React, { useEffect, useState } from 'react';
import loadMBody from "./static/scripts/mindbody";

const MindBodyPage = (props) => {
    const [mindBody, setMindBody] = useState(false);

    useEffect(() => {
        loadMBody(() => {
            setMindBody(true);
        });
    }, []);



    return (
        <div>
            <Container>
                {mindBody && (
                    <healcode-widget
                        data-type="class_lists"
                        data-widget-partner="object"
                        data-widget-id="XXXXXXXXXX"
                        data-widget-version="0">
                    </healcode-widget>
                )}

            </Container>
        </div>
    );
};

MindBodyPage.propTypes = {};

export default MindBodyPage;

Step 4. Wrap MindBody Component in React Router

function App() {
  return (
    <Router>
      <Switch>
      
		    <Route
            path="/mindbody-page"
            exact
            render={() => (
                <ErrorBoundary>
                  <MindBodyPage />
                </ErrorBoundary>
            )}
        />

        <Route path="/" component={HomePage} />
        <Route component={HomePage} />
      </Switch>
    </Router>
  );
}