Vue-loader: You may need an additional loader to handle the result of these loaders.

[zln777]

cannot complie jsx in .vue
This is the error
Module parse failed: Unexpected token (20:37)
[0] File was processed with these loaders:
[0] * ./node_modules/vue-loader/lib/index.js
[0] You may need an additional loader to handle the result of these loaders.
[0] | },
[0] | render(h) {
[0] > const tab = this.$slots.label || {this.label};
[0] | const classNames = {
[0] | tab: true,

Anyone know why ? plz help.

This is my package.json
{
"name": "vue-ssr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.config.server.js",
"build": "npm run clean && npm run build:client && npm run build:server",
"practice": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.practice.js",
"clean": "rimraf public && rimraf server-build",
"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
"dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"dev:server": "nodemon server/server.js",
"dev": "concurrently \"npm run dev:client\" \"npm run dev:server\" ",
"start": "cross-env NODE_ENV=production node server/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"axios": "^0.19.0",
"ejs": "^3.0.1",
"koa": "^2.11.0",
"koa-router": "^7.4.0",
"koa-send": "^5.0.0",
"vue": "^2.6.10",
"vue-loader-plugin": "^1.3.0",
"vue-meta": "^2.3.1",
"vue-router": "^3.1.3",
"vue-server-renderer": "^2.6.10",
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/plugin-proposal-do-expressions": "^7.7.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4",
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
"@babel/plugin-proposal-function-sent": "^7.7.4",
"@babel/plugin-proposal-logical-assignment-operators": "^7.7.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
"@babel/plugin-proposal-numeric-separator": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.7.5",
"@babel/plugin-proposal-pipeline-operator": "^7.7.4",
"@babel/plugin-proposal-throw-expressions": "^7.7.4",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/plugin-syntax-import-meta": "^7.7.4",
"@babel/plugin-syntax-jsx": "^7.7.4",
"@babel/preset-env": "^7.0.0",
"@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
"autoprefixer": "^9.7.2",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.6",
"concurrently": "^5.0.0",
"cross-env": "^6.0.3",
"css-loader": "^3.2.0",
"fibers": "^4.0.2",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"memory-fs": "^0.5.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"nodemon": "^2.0.1",
"postcss-loader": "^3.0.0",
"rimraf": "^3.0.0",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.3.0",
"vue": "^2.6.10",
"vue-loader": "^15.8.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2"
}
}

This is my babelrc
{
"presets": [],
"plugins": [
"@vue/babel-plugin-transform-vue-jsx",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-proposal-object-rest-spread",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions"
],
"env": {
"browser": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}
]
]
},
"node": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}

This is my webpack.config

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === "development";
const config = {
target: "web",
mode: process.env.NODE_ENV || "production",
entry: path.join(__dirname, "../client/client-entry.js"),
output: {
filename: "bundle.[hash:8].js",
path: path.join(__dirname, "../public"),
publicPath: isDev ? "http://127.0.0.1:8000/public/" : "/public/"
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: isDev ? "[name].css" : "[name].[hash].css",
chunkFilename: isDev ? "[id].css" : "[id].[hash].css"
})
],
module: {
rules: [
{
test: /.vue$/,
loader: "vue-loader"
// options: createVueLoader Options(isDev)
},
{
test: /.jsx$/,
loader: "babel-loader"
},
{
test: /.js$/,
loader: "babel-loader",
exclude: path.join(__dirname, "node_modules"),
include: path.join(__dirname, "client"),
options: {
presets: ["env"]
}
},
{
test: /.css$/,
use: ["vue-style-loader", "css-loader", "sass-loader"]
},

  {
    test: /\.(gif|jpg|jpeg|png|svg)$/,
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "resources/[path][name]-[hash:8].[ext]"
        }
      }
    ]
  }
]

},
// 警告 webpack 的性能提示
performance: {
hints: "warning",
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith(".js");
}
}
};

module.exports = config;

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

---

你好，你的 issue 不符合我们所要求的格式，因此已被自动关闭。为了确保每个 issue 都提供必需的相关信息，请务必使用我们的 Issue 向导 来创建新 issue，谢谢！