S
SolidJS•3d ago
JCM

Using solid-mdx in an SPA app (without solid-start/vinxi)

solid-mdxin verison 0.0.7 seems to be widely used as it's part of the solid-start mdx template, and also used for the solidjs and kobalte doc. Unfortunately it has no documentation. All these uses cases are for solid-start where the mdx is rendered on the server. My use case for MDX is to show help pages in an SPA page (it needs to stay SPA, there is no option for JS on the server). I have some trouble in this use case. In the solid-start template the "@vinxi/plugin-mdx" is used, which is not applicable for my application using vite directly. Older samples and the doc of the similar package solidjs-mdx seem to suggest to use @mdx-js/rollup instead. I had some success with follwing vite plugin config (but some issues as classNameinstead of classis passed in MDXProvider): 
    mdx({
      jsxImportSource: "solid-js/h",
      providerImportSource: "solid-mdx",
    }),
    mdx({
      jsxImportSource: "solid-js/h",
      providerImportSource: "solid-mdx",
    }),
however I don't want to use solid-js/h. Unfortunately this doesn't work: 
    mdx({
      jsx: true,
      jsxImportSource: "solid-js",
      providerImportSource: "solid-mdx",
    }),
    mdx({
      jsx: true,
      jsxImportSource: "solid-js",
      providerImportSource: "solid-mdx",
    }),
It gives follwing error: 
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

21 |      ...props.components
22 |    };
23 |    return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
   |                                                                                                                     ^
24 |  }
25 |  function _missingMdxReference(id, component, place) {
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

21 |      ...props.components
22 |    };
23 |    return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);
   |                                                                                                                     ^
24 |  }
25 |  function _missingMdxReference(id, component, place) {
Any advice welcome on how to get solid-mdx running without solid-start/vinxi. I know that I could use solid-start as well for a SPA page, but since this project is going to stay SPA, adding solid-start/vinxi seems a lot of extra dependencies, therefore I would like to check how to get that to work with vite directly.
2 Replies
all_is_source_energy
all_is_source_energy•3d ago
Use a package that works in the browser? https://github.com/markedjs/marked
GitHub
GitHub - markedjs/marked: A markdown parser and compiler. Built for...
A markdown parser and compiler. Built for speed. Contribute to markedjs/marked development by creating an account on GitHub.
JCM
JCMOP•2d ago
Thanks for the reply. I had a look at marked and solid-marked. If I understand solid-marked correctly, this is about compiling the markdown at runtime on the client (eg. dynamic markdown) which is not what I need/want. I would like mdx files to be converted to components are build time, which should be fine also for a SPA. Another way to phrase my question is: How to use solid-mdx without vinixi/@vinxi/plugin-mdx (with @mdx-js/rollup). It's about integrating it with vite when not using vinxi.

Did you find this page helpful?