Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token (24:11)

Question

I am using vue 3 to develop a google chrome extension. I want return a simple div in Vue 3 render function, this is the code looks like:

import client from './client';
import getOptions from '../public/default-options';
import {read} from '../public/clipboard';
import { defineComponent } from 'vue';

export default defineComponent( { 
  client ,
  async compiled() {
    this.inline = true;
    this.showForm = true;
    const {defaultApi , autoClipboard} = await getOptions( [ 'defaultApi' , 'autoClipboard' ] );

    this.query.api = defaultApi;
    if ( autoClipboard ) {
      this.query.text = read();
      this.safeTranslate();
    }
  } ,
  ready() {
    setTimeout( ()=> this.$els.textarea.focus() , 200 );
  },
  render(h) {
    return (
      <div level={1}>
        <span>Hello</span> world!
      </div>
    )
  }
});

when I compile this code, shows error like this:

ERROR in ./src/popup/st.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (25:6)

  23 |   render(h) {
  24 |     return (
> 25 |       <div level={1}>
     |       ^
  26 |         <span>Hello</span> world!
  27 |       </div>
  28 |     )
BabelLoaderError: SyntaxError: Unexpected token (25:6)

  23 |   render(h) {
  24 |     return (
> 25 |       <div level={1}>
     |       ^
  26 |         <span>Hello</span> world!
  27 |       </div>
  28 |     )

    at transpile (/home/dolphin/Documents/GitHub/crx-selection-translate/node_modules/babel-loader/lib/index.js:65:13)
    at Object.module.exports (/home/dolphin/Documents/GitHub/crx-selection-translate/node_modules/babel-loader/lib/index.js:173:20)
 @ ./src/popup/app.js 34:10-25
 @ ./src/popup/index.js 7:0-16

webpack 5.67.0 compiled with 1 error in 11309 ms

I am follow the example from here. what should I do to tweak my code to avoid this problem?