how to fix the error when a JSX component was introduced into vuepress-next

[F-one-1]

Description

The following error occurred when I tried to introduce a JSX component into Vuepress-next. I have no problem running vue3 project using yarn Serve. There was a problem using yarn Docs :dev.

Example .jsx

import { defineComponent, ref } from 'vue'

const Demo = defineComponent({
  name: 'demo',
  setup () {
    const input = ref(null)

    const click = (e) => {
      console.log(e)
      console.log(input.value)
    }
    return {
      click,
      input
    }
  },
  render () {
    return (
      <>
        <div>test</div>
        <button onClick={this.click}>click</button>
        <input v-model={this.input} placeholder="ohhh"/>
      </>
    )
  }
})
export default Demo

the error information

ERROR in ./package/components/demojsx/index.jsx 19:6
Module parse failed: Unexpected token (19:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render () {
|     return (
>       <>
|         <div>test</div>
|         <button onClick={this.click}>click</button>

webpack compiled with 1 error

package.json

"dependencies": {
    "@vuepress/client": "^2.0.0-beta.26",
    "core-js": "^3.8.3",
    "element-plus": "^1.1.0-beta.4",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "node-sass": "6.0.1",
    "sass-loader": "11.1.0",
    "vue": "^3.2.6",
    "vue-router": "^4.0.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "~5.0.0-beta.6",
    "@vue/cli-plugin-eslint": "~5.0.0-beta.6",
    "@vue/cli-service": "~5.0.0-beta.6",
    "@vue/compiler-sfc": "^3.2.6",
    "eslint": "^7.20.0",
    "eslint-plugin-vue": "^7.2.0",
    "vuepress": "^2.0.0-beta.26"
  },

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ["@vue/babel-plugin-jsx"]
}

how to add configure in /docs /. Vuepress/config.js Or something wrong with the way I wrote it.

Vuepress was used before, and no additional configuration items seem to be required. Now I am migrating from vuepress to &-next

[Mister-Hope]

I haven't try jsx with vue yet (especially with vuepress2), vue sfc with <script setup> should be nice enough to use IMO.

If you found something that maybe usefull to other users who wanna use jsx in vuepress, welcome to share something in "Show and tell" block in dicussion.