SolidJS•13mo ago•

2 replies

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

solid-mdx

solid-mdx

in 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

solidjs-mdx

seem to suggest to use

@mdx-js/rollup

@mdx-js/rollup

instead. I had some success with follwing vite plugin config (but some issues as

className

className

instead of

class

class

is passed in

MDXProvider

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

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

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.

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

solid-mdx

solid-mdx

solidjs-mdx

solidjs-mdx

seem to suggest to use

@mdx-js/rollup

@mdx-js/rollup

instead. I had some success with follwing vite plugin config (but some issues as

className

className

instead of

class

class

is passed in

MDXProvider

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

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

solid-mdx

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

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

Similar Threads

Similar Threads

Similar Threads