globally imported h() can only be invoked when there is an active component instance

[emosheeep]

@sodatea Hi there, sorry for bothering, I found an error recently when I migrated my project from vue2.7(webpack) to vue2.7(vite), due to the history reason, it breaks at runtime. for example:

<template>
  <button @click="testJsx">Click Me</button>
</template>

<script lang="jsx">
export default {
  methods: {
    testJsx() {
      console.log(<div>123</div>);
    },
  },
};
</script>

Click the button and the open the console, you'll find that JSX Element can not properly convert to VNode Element

May be this is a bug with strong>@vitejs/plugin-vue2-jsx</strong, because everything runs well with webpack workflow using the same version of strong>@vue/babel-preset-jsx@1.4.0</strong .

I made a minimal reproduction at stackblitz.com，looking forward to your reply, thanks!

[haoqunjiang]

https://github.com/vitejs/vite-plugin-vue2-jsx/blob/622c2c90da2d3d23f17dadba6a4cac6c8b890268/src/index.ts#L102 compositionAPI: 'native' is turned on by default in this plugin

You can turn it off manually if you are not using JSX in setup functions.

However, the case-by-case fix is better in my opinion: https://github.com/vuejs/jsx-vue2/releases/tag/v1.3.0#fn-1

If you encounter such issues after turning the flag on, you can manually add const h = this.$createElement to the beginning of the problematic function. The JSX plugin won't override your explicitly defined h. ↩

[emosheeep]

Thanks a lot👏. I prefer fix case-by-case, After all the project has been migrated to vite.