still works ??

Author: thecodingwizard

gatsby-browser.js

@@ -1,15 +1,14 @@
-import * as fs from 'fs';
-import importFresh from 'import-fresh';
-import * as path from 'path';
-import { SECTIONS } from './content/ordering';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import * as freshOrdering from './content/ordering';
 import { createXdmNode } from './src/gatsby/create-xdm-node';
 import {
   checkInvalidUsacoMetadata,
   getProblemInfo,
   getProblemURL,
   ProblemMetadata,
 } from './src/models/problem';
-const { execSync } = require('child_process');
 
 // Questionable hack to get full commit history so that timestamps work
 try {
@@ -28,9 +27,7 @@ try {
 exports.onCreateNode = async api => {
   const { node, actions, loadNodeContent, createContentDigest, createNodeId } =
     api;
-
   const { createNodeField, createNode, createParentChildLink } = actions;
-
   if (node.internal.type === `File` && node.ext === '.mdx') {
     const content = await loadNodeContent(node);
     const xdmNode = await createXdmNode(
@@ -44,7 +41,6 @@ exports.onCreateNode = async api => {
     createNode(xdmNode);
     createParentChildLink({ parent: node, child: xdmNode });
   }
-
   function transformObject(obj, id) {
     const problemInfoNode = {
       ...obj,
@@ -59,7 +55,6 @@ exports.onCreateNode = async api => {
     createNode(problemInfoNode);
     createParentChildLink({ parent: node, child: problemInfoNode });
   }
-
   const isExtraProblems =
     node.internal.mediaType === 'application/json' &&
     node.sourceInstanceName === 'content' &&
@@ -79,15 +74,15 @@ exports.onCreateNode = async api => {
         : `in node ${node.id}`;
       throw new Error(`Unable to parse JSON: ${hint}`);
     }
-
     const moduleId = parsedContent['MODULE_ID'];
     if (!moduleId && !isExtraProblems) {
       throw new Error(
         'Module ID not found in problem JSON file: ' + node.absolutePath
       );
     }
-
-    const freshOrdering = importFresh<any>('./content/ordering');
+    //const freshOrdering = importFresh<any>(
+    //  path.join(__dirname, './content/ordering.ts')
+    //);
     if (!isExtraProblems && !(moduleId in freshOrdering.moduleIDToSectionMap)) {
       throw new Error(
         '.problems.json moduleId does not correspond to module: ' +
@@ -96,13 +91,14 @@ exports.onCreateNode = async api => {
           node.absolutePath
       );
     }
-
     Object.keys(parsedContent).forEach(tableId => {
       if (tableId === 'MODULE_ID') return;
       try {
         parsedContent[tableId].forEach((metadata: ProblemMetadata) => {
           checkInvalidUsacoMetadata(metadata);
-          const freshOrdering = importFresh<any>('./content/ordering');
+          //const freshOrdering = importFresh<any>(
+          //  path.join(__dirname, './content/ordering.ts')
+          //);
           transformObject(
             {
               ...getProblemInfo(metadata, freshOrdering),
@@ -121,7 +117,6 @@ exports.onCreateNode = async api => {
         throw new Error(e);
       }
     });
-
     if (moduleId) {
       // create a node that contains all of a module's problems
       const id = createNodeId(`${node.id} >>> ModuleProblemLists`);
@@ -130,8 +125,9 @@ exports.onCreateNode = async api => {
         .map(listId => ({
           listId,
           problems: parsedContent[listId].map(x => {
-            const freshOrdering = importFresh<any>('./content/ordering');
-
+            //const freshOrdering = importFresh<any>(
+            //  path.join(__dirname, './content/ordering.ts')
+            //);
             return {
               ...getProblemInfo(x, freshOrdering),
             };
@@ -158,8 +154,8 @@ exports.onCreateNode = async api => {
     node.internal.type === 'Xdm' &&
     node.fileAbsolutePath.includes('content')
   ) {
-    const ordering = importFresh<any>('./content/ordering');
-    if (!(node.frontmatter.id in ordering.moduleIDToSectionMap)) {
+    // const ordering = importFresh<any>('./content/ordering.ts');
+    if (!(node.frontmatter.id in freshOrdering.moduleIDToSectionMap)) {
       throw new Error(
         'module id does not show up in ordering: ' +
           node.frontmatter.id +
@@ -170,9 +166,8 @@ exports.onCreateNode = async api => {
     createNodeField({
       name: 'division',
       node,
-      value: ordering.moduleIDToSectionMap[node.frontmatter.id],
+      value: freshOrdering.moduleIDToSectionMap[node.frontmatter.id],
     });
-
     // https://angelos.dev/2019/09/add-support-for-modification-times-in-gatsby/
     const gitAuthorTime = execSync(
       `git log -1 --pretty=format:%aI ${node.fileAbsolutePath}`
@@ -208,7 +203,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         });
       });
   });
-
   const result = await graphql(`
     query {
       modules: allXdm(filter: { fileAbsolutePath: { regex: "/content/" } }) {
@@ -226,7 +220,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           }
         }
       }
-
       solutions: allXdm(
         filter: { fileAbsolutePath: { regex: "/solutions/" } }
       ) {
@@ -240,7 +233,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           }
         }
       }
-
       problems: allProblemInfo {
         edges {
           node {
@@ -271,7 +263,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   if (result.errors) {
     reporter.panicOnBuild('🚨 ERROR: Loading "createPages" query');
   }
-
   // Check to make sure problems with the same unique ID have consistent information, and that there aren't duplicate slugs
   const problems = result.data.problems.edges;
   let problemSlugs = {}; // maps slug to problem unique ID
@@ -328,13 +319,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     problemURLToUniqueID[node.url] = node.uniqueId;
   });
   // End problems check
-
-  const moduleTemplate = require.resolve(`./src/templates/moduleTemplate.tsx`);
+  const moduleTemplate = path.resolve(`./src/templates/moduleTemplate.tsx`);
   const modules = result.data.modules.edges;
   modules.forEach(({ node }) => {
     if (!node.fields?.division) return;
     const path = `/${node.fields.division}/${node.frontmatter.id}`;
-
     if (node.frontmatter.redirects) {
       node.frontmatter.redirects.forEach(fromPath => {
         createRedirect({
@@ -345,7 +334,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         });
       });
     }
-
     createPage({
       path,
       component: moduleTemplate,
@@ -354,7 +342,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       },
     });
 
-    const freshOrdering = importFresh<any>('./content/ordering');
+    // const freshOrdering = importFresh<any>(
+    //   path.join(__dirname, './content/ordering.ts')
+    // );
     if (node.frontmatter.prerequisites)
       for (const prereq of node.frontmatter.prerequisites) {
         if (!(prereq in freshOrdering.moduleIDToSectionMap)) {
@@ -368,9 +358,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         }
       }
   });
-  const solutionTemplate = require.resolve(
-    `./src/templates/solutionTemplate.tsx`
-  );
+  const solutionTemplate = path.resolve(`./src/templates/solutionTemplate.tsx`);
   const solutions = result.data.solutions.edges;
   solutions.forEach(({ node }) => {
     try {
@@ -437,12 +425,9 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       throw e;
     }
   });
-
   // Generate Syllabus Pages //
-  const syllabusTemplate = require.resolve(
-    `./src/templates/syllabusTemplate.tsx`
-  );
-  SECTIONS.forEach(division => {
+  const syllabusTemplate = path.resolve(`./src/templates/syllabusTemplate.tsx`);
+  freshOrdering.SECTIONS.forEach(division => {
     createPage({
       path: `/${division}`,
       component: syllabusTemplate,
@@ -538,7 +523,7 @@ exports.onCreateWebpackConfig = ({ actions, stage, loaders, plugins }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
-        path: require.resolve('path-browserify'),
+        path: path.resolve('path-browserify'),
       },
       fallback: {
         fs: false,

gatsby-config.js

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 // eslint-disable-next-line
 // @ts-ignore
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import Worker from 'worker-loader!./mdx-renderer.js';
 import { MarkdownProblemListsProvider } from '../../context/MarkdownProblemListsContext';
 import { components } from '../markdown/MDXComponents';
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React.Component<{ children?: React.ReactNode }> {
   state: {
     error: null | any;
   };
@@ -61,16 +57,14 @@ export default function DynamicMarkdownRenderer({
   ] = useState([]);
   const [error, setError] = useState(null);
   const workerRef = useRef(null);
-  const currentlyCompilingRef =
-    useRef<{
-      markdown: string;
-      problems: string;
-    }>(null);
-  const waitingToBeCompiledRef =
-    useRef<{
-      markdown: string;
-      problems: string;
-    }>(null);
+  const currentlyCompilingRef = useRef<{
+    markdown: string;
+    problems: string;
+  }>(null);
+  const waitingToBeCompiledRef = useRef<{
+    markdown: string;
+    problems: string;
+  }>(null);
 
   const requestMarkdownCompilation = () => {
     if (workerRef.current === null) return;
@@ -83,25 +77,23 @@ export default function DynamicMarkdownRenderer({
   };
 
   React.useEffect(() => {
-    const worker = new Worker();
+    const worker = new Worker(new URL('./mdx-renderer.js', import.meta.url));
     worker.onmessage = ({ data }) => {
       currentlyCompilingRef.current = null;
-      ReactDOM.unstable_batchedUpdates(() => {
-        if (data.compiledResult) {
-          setMdxContent(
-            new Function(data.compiledResult)({
-              Fragment,
-              jsx,
-              jsxs,
-            }).default({ components })
-          );
-          setMarkdownProblemListsProviderValue(data.problemsList);
-          setError(null);
-        } else {
-          setError(data.error);
-          setMdxContent(null);
-        }
-      });
+      if (data.compiledResult) {
+        setMdxContent(
+          new Function(data.compiledResult)({
+            Fragment,
+            jsx,
+            jsxs,
+          }).default({ components })
+        );
+        setMarkdownProblemListsProviderValue(data.problemsList);
+        setError(null);
+      } else {
+        setError(data.error);
+        setMdxContent(null);
+      }
       requestMarkdownCompilation();
     };
     workerRef.current = worker;

gatsby-node.js

@@ -1,14 +1,14 @@
-import { compile as xdmCompile } from 'xdm/lib/compile';
-import gfm from 'remark-gfm';
-import remarkMath from 'remark-math';
 import remarkAutolinkHeadings from 'remark-autolink-headings';
-import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import remarkFrontmatter from 'remark-frontmatter';
+import gfm from 'remark-gfm';
+import remarkMath from 'remark-math';
 import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter';
-import remarkToC from '../../mdx-plugins/remark-toc';
+import remarkSlug from 'remark-slug';
+import { compile as xdmCompile } from 'xdm/lib/compile';
 import customRehypeKatex from '../../mdx-plugins/rehype-math';
 import rehypeSnippets from '../../mdx-plugins/rehype-snippets';
+import remarkToC from '../../mdx-plugins/remark-toc';
 
 // See: https://github.com/mdx-js/mdx/blob/main/packages/runtime/src/index.js
 const compile = async ({ markdown, problems }) => {

gatsby-node.ts

@@ -1,7 +1,6 @@
 import { getFunctions, httpsCallable } from 'firebase/functions';
 import React from 'react';
 import toast from 'react-hot-toast';
-import { unstable_batchedUpdates } from 'react-dom';
 import {
   UserPermissionInformation,
   UserPermissions,
@@ -44,10 +43,8 @@ export default function AdminSettings() {
         toast.error('The user with email ' + email + ' could not be found.');
       } else {
         console.log('Got user: ', response.data.users[0]);
-        unstable_batchedUpdates(() => {
-          setUserData(response.data.users[0]);
-          setUserPermissions(response.data.users[0].customClaims);
-        });
+        setUserData(response.data.users[0]);
+        setUserPermissions(response.data.users[0].customClaims);
       }
     } catch (e) {
       toast.error(e.message);

gatsby-ssr.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useAnalyticsEffect } from '../hooks/useAnalyticsEffect';
 import { useUpdateStreakEffect } from '../hooks/useUpdateStreakEffect';
 
-const Layout: React.FC = ({ children }) => {
+const Layout = ({ children }: { children?: React.ReactNode }): JSX.Element => {
   useAnalyticsEffect();
   useUpdateStreakEffect();
   return <div className="font-sans">{children}</div>;

src/components/DynamicMarkdownRenderer/DynamicMarkdownRenderer.tsx

@@ -5,7 +5,11 @@ export const SignInContext = React.createContext<{
   signIn: () => void;
 }>(null);
 
-export const SignInProvider: React.FC = ({ children }) => {
+export const SignInProvider = ({
+  children,
+}: {
+  children?: React.ReactNode;
+}): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const providerValue = React.useMemo(() => {
     return {