Module parse failed: Unexpected token (7:6) File was processed with these loaders:

错误样式

问题分析

我是在使用vue，写渲染函数时出现的问题，所以很清晰知道是这边缺少了对应的loder,查了下发现是需要新增个插件babel-plugin-transform-vue-jsx 。

插件使用

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

在根目录 .babelrc 文件，没有新建一个

{
//官网提供的 "presets": ["env"],但是我这边配时报错了，查的资料改成现在的。
  "presets": ["@babel/preset-env"] 
  "plugins": ["transform-vue-jsx"]
}

以上操作后可以正常显示，可以忽略下面内容

查看webpack配置文件是否有适配jsx

我在项目中使用的vue.config.js做的webpack配置，就是因为没有提前配置搞了好久才排查出问题。

  config.module.rule('jsx')
      .test(/\.(jsx?|babel|es6)$/)
      .use('babel')
      .loader('babel-loader')
      .end();

在chainWebpack 中配置下以上代码，到此这边的报错就解决了。webpack配置还不能熟练使用，搞的时间有点久所以就记录下，以后遇到类似的方便修改。