Estoy usando vue 3 para desarrollar una extensión de Google Chrome. Quiero devolver un div simple en la función de renderizado de Vue 3, este es el código que se ve así:

 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> ) } });

cuando compilo este código, muestra un error como este:

 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

Estoy siguiendo el ejemplo de aquí . ¿Qué debo hacer para modificar mi código para evitar este problema?