Vue supports jsx webpack packaging has always been an error

problem description

vue supports jsx webpack packaging all the time. According to the official website, vue supports jsx, and has checked a lot of materials to install packages such as https://github.com/vuejs/babe..., which has not been solved. It always reports an error
clipboard.png

. The

code is written in a simple demo installation package version that is not built with vue.cli scaffolding and is all built manually

.

related codes

demo.jsx

export default {
    data() {
        return {
            title: " "
        }
    },
    render(h) {
        return (
            <div>
                JSX  {this.title}
            </div>
        )
    }
}

app.vue

<template>
  <div class="_template">
    <div class="example">{{ msg }}</div>
    <Weizhuanhua></Weizhuanhua>
    <img src="./assets/icon/dog.png" alt="icon">
    <ul>
      <li>
        <router-link to="hello">hello</router-link>
      </li>
      <li>
        <router-link to="home">Home</router-link>
      </li>
      <li>
        <router-link to="404">404</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import Weizhuanhua from "./components/jsx/demo.jsx";

export default {
  data() {
    return {
      msg: " "
    };
  },
  components: {
    Weizhuanhua: Weizhuanhua
  }
};
</script>

package.json

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode=development",
    "start": "webpack-dev-server --history-api-fallback",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.22",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^2.1.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "transform-runtime": "0.0.0",
    "vue-loader": "^15.5.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.babelrc

{
    "presets": [
        "env"
    ],
    "plugins": [
        "transform-vue-jsx"
    ]
}

webpack.config.js

rules:

{
    test: /\.jsx$/,
    loader: "babel-loader"
},

what result do you expect? What is the error message actually seen?

for the time being, I still don"t quite understand that when I reported this mistake when I didn"t install the dependency package, it was the same when I installed it. The description of the problem is very simple. I hope the boss who has done it before will give me some instructions. Thank you very much

May.16,2022

test: /\ / jsx$/-> /\ .jsx $/


look at error output , you webpack.config.js , you don't deal with app.vue file vue-loader , do you?

if not, change app.vue to app.jsx .

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bec326-53174.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bec326-53174.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?