JCM Posts - Answer Overflow

JCM

•Created by JCM on 3/11/2025 in #support

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.

3 replies

SSolidJS

•Created by JCM on 12/19/2023 in #support

Avoid re-rendering toolbar in solid router 0.10.x

I have a SPA using with a common toolbar in between all the pages and using config based routing with useRoutes. It's similar to the example from the 0.9.x docs:

function App() {
  const Routes = useRoutes(routes);
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      <Routes />
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

function App() {
  const Routes = useRoutes(routes);
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      <Routes />
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

After migration to 0.10.x, useRoutes is not available anymore. New doc says children must be used. It works when putting the array from the config based routing directly as child of <Router>, but I loose the toolbar. If I would switch to <Route> components defined in JXS I think the problem would be the same as the doc says:

Keep in mind no <Routes> means the <Router> API is different. The <Router> acts as the <Routes> component and its children can only be <Route> components. Your top-level layout should go in the root prop of the router as shown above

Keep in mind no <Routes> means the <Router> API is different. The <Router> acts as the <Routes> component and its children can only be <Route> components. Your top-level layout should go in the root prop of the router as shown above

My questions is: How can I have a toolbar that isn't re-rendered when the route changes in solid router 0.10.x?

5 replies

SSolidJS

•Created by JCM on 12/4/2023 in #support

`reconcile` object to array mutation

I have a data structure coming as JSON from the server that is put in a store. When a new state from server comes, reconcile is used to update the store in order to keep fine grained updates. So far so good, however reconcile doesn't do the expected thing when I have an object in the old state, which needs to be an array in the new state. Here is minimal reproducible example: https://playground.solidjs.com/anonymous/ab7db9d8-47b6-4fd7-8f0b-fda541030b92 Is there a way to fix this behaviour with the existing reconcile. Should I report a bug?

3 replies

Gaming

Programming