升级webpack4 和 babel 报错：vue jsx 不支持 和 命名chunk不支持

Question

主要报2种错

1.vue jsx 不支持

2.命名chunk 不支持

这是我的相关配置：

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-jsx",
        "transform-vue-jsx"
    ]
}

相关依赖

{
  ...
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/helper-module-imports": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/register": "^7.4.0",
    "@babel/runtime": "^7.4.3",
    "ali-oss": "4.10.0",
    "autoprefixer": "7.1.3",
    "babel-eslint": "7.2.3",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-node": "^2.2.0",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-istanbul": "4.1.4",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "babel-register": "6.26.0",
    "chalk": "2.1.0",
    "connect-history-api-fallback": "1.3.0",
    "copy-webpack-plugin": "4.0.1",
    "cross-env": "5.0.5",
    "css-loader": "^2.1.1",
    "eslint": "4.6.1",
    "eslint-config-airbnb-base": "12.0.0",
    "eslint-config-vue": "2.0.2",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-babel": "4.1.2",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jest": "21.0.0",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-vue": "2.1.0",
    "eventsource-polyfill": "0.9.6",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "0.11.2",
    "friendly-errors-webpack-plugin": "1.6.1",
    "fs-promise": "2.0.3",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "http-proxy-middleware": "^0.19.1",
    "js-base64": "^2.4.9",
    "json-loader": "0.5.7",
    "less": "2.7.2",
    "less-loader": "4.0.5",
    "lodash": "^4.17.11",
    "mkdir-recursive": "0.3.0",
    "mockjs": "^1.0.1-beta3",
    "opn": "5.1.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "ora": "1.3.0",
    "postcss-loader": "2.0.6",
    "promise-window": "^1.2.1",
    "rimraf": "2.6.1",
    "style-loader": "0.18.2",
    "underscore-template-loader": "0.8.0",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^4.29.6",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.3.1",
    "webpack-hot-middleware": "^2.24.3"
  }
}

Answer 1

你好 我也遇到了 同样的 问题 请问你最后解决了吗

Answer 2

transform-vue-jsx是babel6配置的插件，webpack4使用babel7，弃用了这个插件，将vue jsx的支持放到了presets中。具体配置方法如下：

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

{
  "presets": ["@vue/babel-preset-jsx"]
}

Answer 3

@vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props
babel-plugin-transform-vue-jsx": "^4.0.1"
都不好用啊。有哪位大佬解决了吗？