Using the MDX starter and HMR doesn't work

[devramsean0]

Title says it all really, no mdx pages hot reload, neither do the .tsx files

[zachschultz]

I'm also running into issues with the MDX starter, but with hydration, HMR is working fine for me! The error I get is:

Error: Unrecoverable Hydration Mismatch. No template for key: 0-0-0-0-0-0-0-0-0-1-0-0-4-0-1-1-0-0-1

Note that this only happens for routes leading to pages with an .mdx extension, .tsx pages refresh fine for me.

[ryansolid]

Yeah this hydration issue seems to be related to the Vite 4.0 update. Downgrading to Vite 3.1.2 seems to fix it. HMR I can't speak to yet.

[DaniGuardiola]

I can confirm that on latest (0.2.26) this happens on my project with Vite 4.1+, downgrading works.

[wakaztahir]

@ryansolid I am experiencing this issue, when I use Dynamic component

Here's the codebase : https://github.com/Qinetik/Anique

To experience the error, You need to turn on ssr in vite config in demo, that's it as soon as you turn on ssr you start getting the error, There's a ErrorBoundary which catches this error and displays it here https://github.com/Qinetik/anique/blob/5107c7cad73c8de3f5311882efe269ea7d24b1e0/styled/src/base.tsx#L170

so if you remove this Dynamic component, the error is gone but also is the site because the whole site uses this

The website works completely when ssr : false

The project is configured, not that big, pnpm updated, everything wired good, run start in the root folder commit https://github.com/Qinetik/anique/tree/5107c7cad73c8de3f5311882efe269ea7d24b1e0

so how can I fix it ?

[iacore]

(Related to MDX not even rendering. Not related to HMR.)

I may have found the issue. MDX creates code like this:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .mdx file format, or if it's an asset, add "**/*.mdx" to `assetsInclude` in your configuration.

2  |  const MDXLayout = "/src/Main.mdx";
3  |  function _createMdxContent(props) {
4  |    return <></>;
   |                 ^
5  |  }
6  |  function MDXContent(props = {}) {

which is invalid, of course.

[darrenbarklie]

@iacore – Thanks for the tip, I also encountered this error by inadvertently placing a semi-colon after my return statement:

export default function Index() {
  return (
    <>
      ...
    </>
  ); // incorrect semi-colon
}

[ryansolid]

In setting up for SolidStarts next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed in mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See https://github.com/solidjs/solid-start/pull/1139 for more details.

[iacore]

Was this a MDX+Solid problem without SolidStart?