Is SolidJS still not possible?

[o-az]

I'm asking since I see now that SolidJS has a jsx-runtime which is what I believe was missing.

My setup:

I'm using @mdx-js/rollup with solid-js and vite. When I add mdx files and try to render I get the following:

[vite] Internal server error: Failed to resolve import "react/jsx-runtime" from "src/blog/helloworld.mdx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/repo/src/blog/helloworld.mdx
  1  |  /*@jsxRuntime automatic @jsxImportSource react*/
  2  |  import {jsx as _jsx} from "react/jsx-runtime";
     |                             ^
  3  |  function MDXContent(props = {}) {
  4  |    const {wrapper: MDXLayout} = props.components || ({});

My Vite setup:

const config = async (): Promise<UserConfig> => {
  const { default: mdx } = await import('@mdx-js/rollup')

  return {
    plugins: [solidPlugin(), WindiCSS(), tsconfigPaths(), mdx({ remarkPlugins: [] })],
    optimizeDeps: {
      include: ['solid-js/h/jsx-runtime'],
    },
    build: { minify: true, target: 'esnext', polyfillDynamicImport: false },
    /** vitest */
    test: { globals: true },
  }
}

export default defineConfig(config)

[wooorm]

You are not configuring mdx at all. MDX does now know you are using Solid currently. You need to configure MDX.
You need to choose that new solid JSX runtime in the mdx options.

[o-az]

Yes sir I'm very happy to help. Chat on Discord? Discord id: Amor Fati#6969

[wooorm]

I don’t have discord, but I was thinking of something like this: #1850

[o-az]

sounds good, I'll take care of that.

[o-az]

@wooorm you're referring to the setup of vite I have in order to get mdx working with SolidJS? Here's what I'm adding

See screenshots

[wooorm]

Yes, I’m referring to documentation in Getting started for how to configure MDX with Solid.js.
It’s easier if you create a PR, so I can suggest changes.
Have you created PRs before?
Some early notes:

• Place Solid under React and Preact, next to Svelte, in the JSX section
• I don’t think that Rollup and Vite are required for Solid. Look at the Svelte docs for an example of how to document something without forcing a single integration
• 'solid-mdx' is potentially (hopefully?) not required for Solid either. The provider is an optional context-based API that MDX can use, but does not require
• Please use JavaScript syntax for code examples, and look at other code examples on how to provide a syntax and a filename associated with an example

[o-az]

Thanks to modderme123 on SolidJS Discord and @wooorm, got it working. Current setup:

const config = async (): Promise<UserConfig> => {
  const { default: mdx } = await import('@mdx-js/rollup')

  return {
    plugins: [
      solid(),
      WindiCSS(),
      tsconfigPaths(),
      mdx({
        remarkPlugins: [],
        jsxImportSource: 'solid-jsx',
        providerImportSource: 'solid-mdx',
      }),
    ],
    server: { host: '0.0.0.0', port: 3000 },
    resolve: {
      alias: {
        '@/': './src',
        '~blog/': './data/blog',
      },
    },
    optimizeDeps: {
      include: ['solid-js/h/jsx-runtime'],
    },
    build: { minify: true, target: 'esnext', polyfillDynamicImport: false },
    /** vitest */
    test: { globals: true },
  }
}

export default defineConfig(config)