[v2] Rollup plugin and jsx-runtime import rename in ESM env

[jugglingcats]

Hi, I'm configuring mdx-js with Vite (ssr mode but don't think that's too relevant). If I add @mdx-js/rollup@next and configure in vite.config.mjs (note the .mjs extension), I get an error:

Uncaught ReferenceError: module is not defined
    at jsx-runtime.js? [sm]:6

This is because I'm in "full ESM" mode and the import doesn't include the .js extension. I notice that in the unit tests for @mdx-js/rollup there is a bit of code to rewrite the react/jsx-runtime import:

  await fs.writeFile(
    new URL('./rollup.js', import.meta.url),
    output[0].code.replace(/\/jsx-runtime(?=["'])/g, '$&.js')
  )

https://github.com/mdx-js/mdx/blob/main/packages/rollup/test/index.test.js#L30

Am just wondering if this is the only/recommended way as it seems like a horrible hack... or if there is an issue I can watch for a fix? It seems similar to this issue: facebook/react#20235, but there is a lot of noise there.

Thanks

[jugglingcats]

Of course I immediately found the answer after posting my question. For others arriving here, we can add resolve/alias to the Vite config which is passed to Rollup:

/**
 * @type {import('vite').UserConfig}
 */
export default {
    resolve: {
        alias: {
            "react/jsx-runtime": "react/jsx-runtime.js"
        }
    },
    plugins: [
...

[wooorm]

This is a bit of a problem in React. they defined that /jsx-runtime has to be used. But they don’t support that in v17 🙄. I raised it somewhere in April I believe, when they already had it merged, but it’s never released on v17.
The good news is that Preact and React 18 do support export maps. So maybe use that, or use patch-package to add an export map in react’s package.json 🤔

[jugglingcats]

Thanks @wooorm, think I saw your comment to the React folks! The workaround above is good for me at least for Vite, and I believe similar workarounds are available for vanilla Rollup, Webpack, etc.

[silvenon]

@jugglingcats do you also happen to know how to make HMR work? 😇

[jugglingcats]

Hi @silvenon for us HMR "just works". We are using Vite SSR/SSG as outlined here: https://vitejs.dev/guide/ssr.html#setting-up-the-dev-server, and once the mdx-js/rollup plugin is added .mdx files are rendered and edits trigger HMR as expected. I would hope it works the same for a non-SSR Vite project.

[silvenon]

Indeed it does, thanks! I just had too primitive of a test setup, rendering components directly with render instead of having a separate App.jsx file.