Version

3.0.0

Reproduction link

https://codesandbox.io/s/billowing-cdn-yzf62?file=/src/main.ts

Steps to reproduce

The global component Hello was defined in the main.ts.

// main.ts

import { createApp } from 'vue';
import App from './App';
import Hello from './components/Hello';

const app = createApp(App);
app.component('Hello', Hello).mount('#app');

// App.tsx

import { defineComponent } from 'vue';

const render = () => (
  <>
    <Home />
  </>
);
export default defineComponent(() => render);

define Hello component.

// Hello.tsx

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <>
        <h1>{props.msg}</h1>
      </>
    );
  },
});

The component Hello is used in the Home.tsx

// Home.tsx

import { defineComponent } from 'vue';

export default defineComponent(() => {
  return () => (
    <>
      <Hello msg="hello!" />
    </>
  );
});

What is expected?

render "

hello!

What is actually happening?

In the console has error: Hello is not defined.

And if i use .vue sfc file it can work.

For JSX/TSX, you have to use resolveComponent to use app-level registered components, or import them locally.

It's working, Thanks!