Correct way to use mdx with solidjs?

[xarthurx]

I'm trying to use this piece of code (from solid-start repo) to import my mdx or md files:

export const mods = /*#__PURE__*/ import.meta.glob<
  true,
  any,
  {
    getHeadings: () => {
      depth: number;
      text: string;
      slug: string;
    }[];
    getFrontMatter: () => {
      title?: string;
      sectionTitle?: string;
      order?: number;
      section?: string;
      sectionOrder?: number;
      subsection?: string;
    };
  }
>("./docs/**/*.{md,mdx}", {
  eager: true,
  query: {
    meta: ""
  }
});

solid-start/docs.root.tsx

Line 20 in b2a09b3

export const mods = /*#__PURE__*/ import.meta.glob<

However, if I don't activate mdx in the vite.config.ts, the getHeadings() and getFrontMatter() functions are not available.

If I add mdx to the vite.config.ts as the doc shows:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import unocss from "unocss/vite";
import unocssPlugin from "unocss/vite";
import mdx from "@mdx-js/rollup";
import remarkGfm from "remark-gfm";

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    {
      ...(await import("@mdx-js/rollup")).default({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
      enforce: "pre",
    },
    mdx({
      jsxImportSource: "solid-jsx",
      remarkPlugins: [remarkGfm],
    }),
    solid({
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],
});

When I start the server, I get this error:

An unhandled error occured: Error: Cannot parse given Error object
    at parse (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/error-stack-parser-es@0.1.1/node_modules/error-stack-parser-es/dist/index.mjs:12:11)
    at parseError (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:1280:17)
    at file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:940:26
    at async Object.transform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
    at async loadAndTransform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
    at async instantiateModule (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)
GET http://localhost:3000/favicon.ico
An unhandled error occured: Error: Cannot parse given Error object
    at parse (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/error-stack-parser-es@0.1.1/node_modules/error-stack-parser-es/dist/index.mjs:12:11)
    at parseError (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:1280:17)
    at file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:940:26
    at async Object.transform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
    at async loadAndTransform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
    at async instantiateModule (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

If I do

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    mdx({
      jsxImportSource: "solid-jsx",
      remarkPlugins: [remarkGfm],
    }),
    solid({
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],
});

Then the the frontmatter of the mdx files cannot be parsed correctly:

11:30:38 [vite] Error when evaluating SSR module ~start/entry-server: failed to import "/node_modules/.pnpm/solid-start@0.3.4_@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.7.11_solid-start-node@0.3.4_vite@4.4.9/node_modules/solid-start/entry-server/index.ts"
|- SyntaxError: C:\Users\xarthurx\source\docRepo\website_beyondDisciplineRemake\src\routes\(index)\blog\test2.md: Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Project setup
  3 | section: getting-started
  4 | ---

It seems I cannot get the mdx package work with solidjs anyhow...

[xarthurx]

Some background here:

I'm trying to build a website, where one of the page can show all the titles, dates of my blog posts.
For this, I'm trying to import all the markdown files and to getHeadings() or getFrontMatter().

(Actually I'm not sure if these two functions are from the mdx package, but since I saw it from the source code of solid-start website, I guess there's a way of using it.)

Any comments will be welcomed.

[xarthurx]

OK, based on here: https://mdxjs.com/guides/frontmatter/
The frontmatter is not supported by default...
adding additional package can make the app load markdown files with YAML-like frontmatter correctly:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import unocss from "unocss/vite";
import unocssPlugin from "unocss/vite";
import mdx from "@mdx-js/rollup";

import remarkGfm from "remark-gfm";
import remarkFrontmatter from "remark-frontmatter"; // YAML and such. <--------- HERE

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    {
      ...(await import("@mdx-js/rollup")).default({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
        remarkPlugins: [remarkGfm, remarkFrontmatter],   <--------- HERE
      }),
      enforce: "pre",
    },
    solid({
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],
});

But I'm still unable to utilize the getHeadings() and getFrontMatter() functions defined during the import.

[edivados]

But I'm still unable to utilize the getHeadings() and getFrontMatter() functions defined during the import.

To me it looks like getHeadings and getFrontMatter are generated by solid-start-mdx package.
Docs uses it https://github.com/solidjs/solid-start/blob/main/vite.config.ts

[xbmlz]

You can try vite-plugin-solid-markdown

I'm trying to use this piece of code (from solid-start repo) to import my mdx or md files:

export const mods = /*#__PURE__*/ import.meta.glob<
  true,
  any,
  {
    getHeadings: () => {
      depth: number;
      text: string;
      slug: string;
    }[];
    getFrontMatter: () => {
      title?: string;
      sectionTitle?: string;
      order?: number;
      section?: string;
      sectionOrder?: number;
      subsection?: string;
    };
  }
>("./docs/**/*.{md,mdx}", {
  eager: true,
  query: {
    meta: ""
  }
});

solid-start/docs.root.tsx

Line 20 in b2a09b3

export const mods = /*#__PURE__*/ import.meta.glob<

However, if I don't activate mdx in the vite.config.ts, the getHeadings() and getFrontMatter() functions are not available.

If I add mdx to the vite.config.ts as the doc shows:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import unocss from "unocss/vite";
import unocssPlugin from "unocss/vite";
import mdx from "@mdx-js/rollup";
import remarkGfm from "remark-gfm";

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    {
      ...(await import("@mdx-js/rollup")).default({
        jsx: true,
        jsxImportSource: "solid-js",
        providerImportSource: "solid-mdx",
      }),
      enforce: "pre",
    },
    mdx({
      jsxImportSource: "solid-jsx",
      remarkPlugins: [remarkGfm],
    }),
    solid({
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],
});

When I start the server, I get this error:

An unhandled error occured: Error: Cannot parse given Error object
    at parse (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/error-stack-parser-es@0.1.1/node_modules/error-stack-parser-es/dist/index.mjs:12:11)
    at parseError (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:1280:17)
    at file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:940:26
    at async Object.transform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
    at async loadAndTransform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
    at async instantiateModule (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)
GET http://localhost:3000/favicon.ico
An unhandled error occured: Error: Cannot parse given Error object
    at parse (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/error-stack-parser-es@0.1.1/node_modules/error-stack-parser-es/dist/index.mjs:12:11)
    at parseError (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:1280:17)
    at file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite-plugin-inspect@0.7.38_rollup@3.28.1_vite@4.4.9/node_modules/vite-plugin-inspect/dist/index.mjs:940:26
    at async Object.transform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30)
    at async loadAndTransform (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29)
    at async instantiateModule (file:///C:/Users/xarthurx/source/docRepo/website_beyondDisciplineRemake/node_modules/.pnpm/vite@4.4.9/node_modules/vite/dist/node/chunks/dep-df561101.js:55875:10)

If I do

export default defineConfig({
  plugins: [
    unocssPlugin(),
    unocss(),
    mdx({
      jsxImportSource: "solid-jsx",
      remarkPlugins: [remarkGfm],
    }),
    solid({
      extensions: [".mdx", ".md"],
      ssr: true,
    }),
  ],
});

Then the the frontmatter of the mdx files cannot be parsed correctly:

11:30:38 [vite] Error when evaluating SSR module ~start/entry-server: failed to import "/node_modules/.pnpm/solid-start@0.3.4_@solidjs+meta@0.28.6_@solidjs+router@0.8.3_solid-js@1.7.11_solid-start-node@0.3.4_vite@4.4.9/node_modules/solid-start/entry-server/index.ts"
|- SyntaxError: C:\Users\xarthurx\source\docRepo\website_beyondDisciplineRemake\src\routes\(index)\blog\test2.md: Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Project setup
  3 | section: getting-started
  4 | ---

It seems I cannot get the mdx package work with solidjs anyhow...

You can try vite-plugin-solid-markdown