webpack处理vue中render函数内容时报错

  • Z时代
  • 2024-03-14
  • 分类：IT

webpack处理vue中render函数内容时报错

打包组件的时候报错，提示需要别的loader来处理render函数中的内容。但是我不是很理解，我已经用了vue-loader了。。。
求大神指点。。。
报错内容：

ERROR in ./components/lib/tag/src/tag.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./components/lib/tag/src/tag.vue?vue&type=script&lang=js&) 41:6
Module parse failed: Unexpected token (41:6)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     ];
|     const tagEl = (
>       <span class={classes} on-click={this.handleClick}>
|         {this.$slots.default}
|       </span>
 @ ./components/lib/tag/src/tag.vue?vue&type=script&lang=js& 1:0-124 1:140-143 1:145-266 1:145-266
 @ ./components/lib/tag/src/tag.vue
 @ ./components/lib/tag/index.js

webpack配置

const path = require('path');
const { VueLoaderPlugin } = require("vue-loader");
const glob = require("glob");
const list = {};
async function makeList(dirPath, list) {
  const files = glob.sync(`${dirPath}/**/index.js`);
  for (let file of files) {
    const component = file.split(/[/.]/)[2];
    console.log("componenet:", component);
    list[component] = `./${file}`;
  }
  console.log(list);
}
makeList("components/lib", list);
module.exports = {
  entry: list,
  mode: 'development',
  output: {
    filename: "[name].umd.js", //card.umd.js
    path: path.resolve(__dirname, 'dist'),
library: "mui",
    libraryTarget: "commonjs2",
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
        filename: 'src/[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

组件代码

<script>
export default {
  name: "hc-tag",
  props: {
    text: String,
    type: {
      type: String,
      default: "primary",
    },
    size: String,
    effect: {
      type: String,
      default: "dark",
    },
    round: { type: Boolean, default: false },
  },
  computed: {
    tagSize() {
      return this.size || (this.$ELEMENT || {}).size;
    },
  },
  methods: {
    handleClose(event) {
      event.stopPropagation();
      this.$emit("close", event);
    },
    handleClick(event) {
      this.$emit("click", event);
    },
  },
  render() {
    const { type, tagSize, effect, round } = this;
    const classes = [
      "hc-tag",
      type ? `hc-tag--${type}` : "",
      effect ? `hc-tag--${effect}` : "",
      tagSize ? `hc-tag--${tagSize}` : "hc-tag--mini",
      round ? `is-round` : "",
    ];
    const tagEl = (
      <span class={classes} on-click={this.handleClick}>
        {this.$slots.default}
      </span>
    );
    return tagEl;
  },
};
</script>

依赖版本

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.0",
    "eslint": "^6.7.2",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^1.1.11",
    "json-loader": "^0.5.7",
    "karma-sourcemap-loader": "^0.3.7",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^0.23.1",
    "url-loader": "^1.0.1",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.11",
    "webpack-cli": "^4.6.0"
  },

回答：

vue-loader默认是不支持jsx语法的，需要配置babel-loader进行转化，可参考这个
webpack vue使用jsx

以上是 webpack处理vue中render函数内容时报错 的全部内容， 来源链接： utcz.com/p/937509.html

回到顶部