nano jsx in vite

[leamandeep]

I want to use nano jsx inside vite javascript template. Please guide me how to setup nano jsx in vite . I tried here's my configuration. But i'm facing error ERROR: Invalid option in transform() call: "entryPoints"

export default defineConfig({
  esbuild: {
    entryPoints: ["main.jsx"],
    jsxFactory: "h",
    jsxFragment: "Fragment",
    loader: "jsx",
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
    },
  },
});

[jrson83]

I made a plugin, vite-preset-nano-jsx a while ago, never released it, but still got the local repo. I will check if it is still working with current version and let you know.

[jrson83]

@yandeu I looked into the issue and tested nano jsx with Vite, since the jsx-runtime changed since I last used nano. It is actually no problem, but requires ugly hacks like setting esbuild jsxDev: false and use of import { ... } from 'nano-jsx/esm/index.js'.

This is because the exports for esm, cjs and types are not properly setup in nano jsx package.json.

There are two issues:

1. Since nano provides its own h, it should follow the specification and export a jsx-dev-runtime. Vite/esbuild is trying to a access the runtime when runing dev and fails to resolve, because the export is missing:

Please read esbuild - JSX import source.

[plugin:vite:import-analysis]
Failed to resolve import "nano-jsx/esm/jsx-dev-runtime" from "src/main.tsx". Does the file exist?

The workaround is to disable jsxDev in vite.config.ts:

import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    jsxDev: false,
  },
});

2. The exports in package.json should be setup properly:

• Either choose type module or commonjs
• Then either compile to .js, .cjs or .mjs file extension properly, but do not export ./lib/index.js & ./esm/index.js both with the same .js extension
• Add "module": "./esm/index.{js,mjs}" to package.json
• Typings output should be generated only once into types folder and then properly exported for both lib & esm folder

With the current nano exports, vscode Intellisense and bundlers will not automatically be able to resolve ESM/CJS.

I have setup a minimal working example @ stackblitz. It's working, but it's not pretty.

[leamandeep]

Thanks