I have a Docusaurus implementation in which I am trying to compare graphql schemas using graphql-inspector and display the result.
After diagnosing and resolving all of the Webpack 5 issues none of the graphql-inspector packages work. I receive: Cannot read properties of undefined (reading ‘dirname’)
TypeError: Cannot read properties of undefined (reading ‘dirname’)

I have this code running as a component in Docusaurus

`import React from 'react';
import styles from './styles.module.css';

import { loadSchemaSync } from '@graphql-tools/load';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import graphql from 'graphql';


const load = async () => {

    const schema = loadSchemaSync("./**/*.graphql", { 
        loaders: [new GraphQLFileLoader()] 
    });

    console.log('Schema: ', schema)
}

const Compare = () => {

    load();

    return (
        <div className={styles.wrapper}>
            This is the component
        </div>
    )

}

export default Compare;`

I receive the errors:

Cannot access ‘GraphQLFileLoader’ before initialization
ReferenceError: Cannot access ‘GraphQLFileLoader’ before initialization

and

Cannot read properties of undefined (reading ‘dirname’)
TypeError: Cannot read properties of undefined (reading ‘dirname’)