Example / how to use @babel/plugin-transform-react-jsx-source w/rollup and vite?

[rejhgadellaa]

I'm trying to get @babel/plugin-transform-react-jsx-source to work in my projects but I keep getting the following warning if I throw an error somewhere in a component:

Add @babel/plugin-transform-react-jsx-source to get a more detailed component stack. Note that you should not add it to production builds of your App for bundle size reasons.

Find my current configs for rollup and vite below. Any pointers as to what I'm doing wrong?

Rollup config:

{
  input: '...',
  output: '...',
  plugins: [
    peerDepsExternal(),
    replace(),
    resolve(),
    babel({
      babelHelpers: 'bundled',
      presets: [
        ['@babel/preset-env', {
          targets: 'defaults and supports es6-module',
        }],
      ],
      plugins: [
        [
          production
            ? '@babel/plugin-transform-react-jsx'
            : '@babel/plugin-transform-react-jsx-development',
          { runtime: 'automatic', importSource: 'preact' }
        ],
        !production && '@babel/plugin-transform-react-jsx-source',
        !production && 'babel-plugin-transform-hook-names',
      ].filter( Boolean ),
    }),
    commonjs(),
    json(),
    postcss(),
    production && terser(),
  ].filter( Boolean ),
};

Vite config:

const cfg = {
  /* ... */
  plugins: [
    // @preact/preset-vite
    preact({ 
      devToolsEnabled: true,
      prefreshEnabled: false,
      reactAliasesEnabled: false,
      babel: {
        plugins: [
          !production && '@babel/plugin-transform-react-jsx-source',
        ].filter( Boolean ),
      }
    }),
    // @originjs/vite-plugin-commonjs
    commonjs(), 
  ],
  /* ... */
};