Gatsby Path Errored During SSR

I am running into an error during the compilation of my site.

Here is the associated command line output:

warn The path "/" errored during SSR.
Edit its component home/cole/Documents/repos/kcom3/web/themes/custom/simplytheme
/templates/block|sync|/^/.//.*//.*/.js$:2:1 to resolve the error.

I am dynamically importing components based on where the component sits in the project tree like so:

// Gatsby Config File
const config = require('./kstat-config.json');

module.exports = {
  plugins: [
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${config.componentDir}`,
      },
    },
    'gatsby-plugin-postcss',
  ],
};

and from the index of the page:

import React from 'react';
import { graphql } from 'gatsby';
import Navigation from '../components/navigation';
import Components from '../components/components';

const index = ({ data }) => {
  const { allFile } = data;
  const { edges } = allFile;

  let components = [];

  edges.forEach((edge) => {
    const { node } = edge;

    if (node.extension === "js") {
      const path = node.dir.split("/templates/block")[1];
      const trueName = node.name.replace('.kstat', '');

      components.push({
        name: trueName,
        component: require(`../../../../../templates/block/${path}/${node.name}.js`).default()
      });
    }
  });

  return (
    <div className="ks-wrapper font-sans">
      <section className="ks-left-column bg-indigo-600">
        <Navigation components={components} />
      </section>
      <div className="ks-components-container">
        <Components components={components} />
      </div>
    </div>
  );
}

export const pageQuery = graphql`
{
  allFile {
    edges {
      node {
        extension
        dir
        modifiedTime
        name
      }
    }
  }
}
`;

export default index;

Finally, here is the only component within the templates directory:

import React from "react"
import Twig from "twig"
import TwigDrupal from "twig-drupal-filters"
import newTemplate from 'raw-loader!./new.twig'
import parse from 'html-react-parser'
import newData from './new.yml'

TwigDrupal(Twig)

const New = () => {
  return <div>  {parse(Twig.twig({
    data: newTemplate,
  }).render(newData))} </div>
}

export default New

I can't seem to accurately diagnose the issue since the error message provides a regex. It leads me to believe that there is something wrong with the way I am requiring my components but I am unsure.

Any help is greatly appreciated!