add file path logs, to find the culprit

Author: AmyrAhmady

frontend/src/config.ts

@@ -3,5 +3,3 @@ export const API_ADDRESS =
 
 export const WEB_ADDRESS =
   process.env.NEXT_PUBLIC_WEB_ADDRESS ?? "https://open.mp";
-
-console.log(API_ADDRESS, WEB_ADDRESS);

frontend/src/mdx-helpers/babel-plugin-mdx-browser.ts

@@ -2,6 +2,11 @@ export default function BabelPluginMdxBrowser() {
   return {
     visitor: {
       // remove all imports, we will add these to scope manually
+      Program(path, state) {
+        // Log the filename using state
+        const filename = state.file.opts.filename || "Unknown file";
+        console.log("Processing file:", filename);
+      },
       ImportDeclaration(path: any) {
         path.remove();
       },

frontend/src/mdx-helpers/ssr.ts

@@ -21,13 +21,14 @@ export const markdownSSR = async (
   const { source } = await readLocaleContent(file, locale);
   return await renderToString(source, {
     components: MDX_COMPONENTS,
+    fileName: file
   });
 };
 
 // Stolen from Hashicorp's next-mdx-remote!
 export const renderToString = async (
   source: Buffer | string,
-  { components, mdxOptions, scope = {} }: MarkdownRenderConfig
+  { components, mdxOptions, scope = {}, fileName }: MarkdownRenderConfig
 ): Promise<MarkdownContent> => {
   // transform it into react
   const code = await mdx(source, { ...mdxOptions, skipExport: true });
@@ -47,6 +48,7 @@ export const renderToString = async (
     presets: [presetReact, presetEnv],
     plugins: [pluginBrowser],
     configFile: false,
+    filename: fileName
   });
 
   // evaluate the code

frontend/src/mdx-helpers/types.ts

@@ -10,4 +10,5 @@ export type MarkdownRenderConfig = {
   components: Components;
   mdxOptions?: any;
   scope?: any;
+  fileName: string;
 };

frontend/src/pages/[...slug].tsx

@@ -25,9 +25,10 @@ type Props = {
   error?: string;
   data?: { [key: string]: any };
   fallback?: boolean;
+  filePath?: string;
 };
 
-const Page = ({ source, error, data, fallback }: Props) => {
+const Page = ({ source, error, data, fallback, filePath }: Props) => {
   if (error) {
     return (
       <section>
@@ -37,7 +38,11 @@ const Page = ({ source, error, data, fallback }: Props) => {
   }
 
   const content =
-    source && hydrate(source, { components: components as Components });
+    source &&
+    hydrate(source, {
+      components: components as Components,
+      fileName: filePath,
+    });
 
   const codeColor = useColorModeValue(
     "var(--chakra-colors-gray-200)",
@@ -87,7 +92,6 @@ import {
 import { renderToString } from "src/mdx-helpers/ssr";
 import { RawContent } from "src/types/content";
 import { Components } from "@mdx-js/react";
-import { concat, flatten, flow, map } from "lodash/fp";
 import rehypeStarryNight from "@microflash/rehype-starry-night";
 
 export async function getStaticProps(
@@ -107,6 +111,7 @@ export async function getStaticProps(
 
   const mdxSource = await renderToString(content, {
     components: components as Components,
+    fileName: route.join("/"),
     mdxOptions: {
       components: components as Components,
       rehypePlugins: [
@@ -115,7 +120,14 @@ export async function getStaticProps(
     },
   });
 
-  return { props: { source: mdxSource, data, fallback: result.fallback } };
+  return {
+    props: {
+      source: mdxSource,
+      data,
+      fallback: result.fallback,
+      filePath: route.join("/"),
+    },
+  };
 }
 
 export function getStaticPaths(): GetStaticPathsResult {

frontend/src/pages/docs/[[...path]].tsx

@@ -19,6 +19,7 @@ type Props = {
   data?: { [key: string]: any };
   fallback?: boolean;
   ghUrl?: string;
+  filePath?: string;
 };
 
 const Page = (props: Props) => {
@@ -31,7 +32,10 @@ const Page = (props: Props) => {
   // not there was an error in the following if-statement.
   const content =
     props.source &&
-    hydrate(props.source, { components: components as Components });
+    hydrate(props.source, {
+      components: components as Components,
+      fileName: props.filePath,
+    });
 
   const codeColor = useColorModeValue(
     "var(--chakra-colors-gray-200)",
@@ -193,6 +197,7 @@ export async function getStaticProps(
   // TODO: plugin for frontmatter
   const mdxSource = await renderToString(content, {
     components,
+    fileName: path,
     mdxOptions: {
       remarkPlugins: [
         admonitions,
@@ -210,6 +215,7 @@ export async function getStaticProps(
       data,
       fallback: result.fallback,
       ghUrl: getDocsGithubUrl(path, !result.fallback, locale),
+      filePath: path,
     },
   };
 }