vue3 jsx produces "React is not defined"

i am trying to implement storybook with antdesignvue i get the error “ReferenceError: React is not defined” when i tried to import a tsx file which returns jsx in button.stories.js file (screenshot is attached)

my settings are

//vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
    },
    plugins: [
    vue(),
    vueJsx(),
    Components({
        dirs: ["./components"],
    }),
    ],
});

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "ant-design-vue": ["components/index.ts"],
      "ant-design-vue/es/*": ["components/*"],
      "@components/*": ["./components/*"],
      "@assets/*": ["./assets/*"],
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "strictNullChecks": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "preserve",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "importsNotUsedAsValues": "preserve",
    "target": "es5",
    "useDefineForClassFields": true,
    "module": "esnext",
    "strict": false,
    "sourceMap": true,
    "resolveJsonModule": true,
  },
  "exclude": ["node_modules", "lib", "es", "dist", "v2-doc", "scripts", "**/__tests__/**/*"],
  "forceConsistentCasingInFileNames": true,
  "isolatedModules": true,
  "lib": ["dom", "dom.iterable", "esnext"],
  "module": "esnext",
  "moduleResolution": "node",
  "noEmit": true,
  "noFallthroughCasesInSwitch": true,
  "resolveJsonModule": true,
  "skipLibCheck": true,
  "strict": true,
  "target": "es5",
  "types": ["node", "vite/client"],
  "include": [
    "components/**/*.ts",
    "components/**/*.d.ts",
    "components/**/*.tsx",
    "components/**/*.vue"
  ]
}

Button.stories.js

import Button from "../components/button/button";

export default {
  title: "Button",
  components: { Button },
};

const Template = (args) => ({
  props: Object.keys(args),
  components: { Button },
  setup() {
    return { args };
  },
  template: `
    <Button v-bind="args" />
  `,
});

export const Hello = Template.bind({});
Hello.args = {};

error screenshot is

every kind of help is much appreciated

[maicolbruski]

You are Genius!

Works perfect with:

.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-vite",
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    config.plugins = [
      ...config.plugins,
      require("@vitejs/plugin-vue-jsx")({
        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
      }),
    ];
    return config;
  },
};

Tks @IanVS !!!

[IanVS]

It looks like you are missing https://github.com/vitejs/vite/tree/master/packages/plugin-vue-jsx from the vite config. Adding vite plugins is a little bit tricky right now, but it can be done in viteFinal. Here’s an example of someone changing the plugins: https://github.com/storybookjs/builder-vite/issues/286#issue-1176508222. I think all you’ll need to do is push the one you want onto the end of the existing config.plugins.