🐾Pow
🐾Pow
PostsComments
NNuxt
Created by 🐾Pow on 3/26/2025 in #❓・help
How to apply esbuild jsxImportSource file overwrite?
Hi, i have a unusual setup i am porting from another vue framework to nuxt. custom jsx setup The setup involves having certain files using different JSX transform options. Certain files use a custom JSX runtime for performance reasons and this was previously solved using esbuild comment overwrites according to https://esbuild.github.io/api/#jsx assets/custom/foobar.tsx 
// @jsxRuntime automatic
/* @jsxImportSource ~/assets/custom/customJsx */

function createPerformantNodesWithCustomJsxRuntime(){
  // This would after transformation add imports for ~/assets/custom/customJsx and its jsx() function
  return (<div></div>);
}
// @jsxRuntime automatic
/* @jsxImportSource ~/assets/custom/customJsx */

function createPerformantNodesWithCustomJsxRuntime(){
  // This would after transformation add imports for ~/assets/custom/customJsx and its jsx() function
  return (<div></div>);
}
And as additional fallback a .babelrc file in the assets/custom ensures the same ruleset incase babel is used: assets/custom/.babelrc 
{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false,
        "runtime": "automatic",
        "importSource": "~/assets/custom/customJsx"
      }
    ]
  ]
}
{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "throwIfNamespace": false,
        "runtime": "automatic",
        "importSource": "~/assets/custom/customJsx"
      }
    ]
  ]
}
problem However inside a nuxt project these overwrites seem to be ignored and vue/createVNode() is used no matter what. Additionally i have tried: - Excluding the assets/custom directory via vite.vueJsx.exclude inside nuxt.config.ts - Adding a nested tsconfig inside assets/custom - Forcing babel transpilation using build.transpile However sadly to no avail. Is anyone aware of a method to apply these JSX runtime overwrites per file?
18 replies