SolidJSS
SolidJS•11mo ago•
2 replies
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",
    }),

however I don't want to use solid-js/h. Unfortunately this doesn't work:

    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) {


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.
Was this page helpful?