从4.0beta升级到4.0.26后项目无法启动

dongasai commented 3 years ago

（必填）请填写问题描述或截图： 今天看文档发现，好多东西都跟我的版本不对应了，于是升级了一下

以下是我的依赖，4.0beta期间创建的项目，我都忘记是使用什么创建的项目了


{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --no-clean",
    "lint": "vue-cli-service lint",
    "bs": "vue-cli-service build --no-clean &&  vue-cli-service serve"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "@antv/layout": "^0.1.14",
    "@antv/x6": "^1.23.6",
    "ant-design-vue": "^2.0.0",
    "core-js": "^3.6.5",
    "exceljs": "^4.2.1",
    "js-base64": "^3.6.0",
    "jshashes": "^1.0.8",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "vue": "^3.0.0",
    "vue-ls": "^3.2.2",
    "vue-router": "4",
    "vue-use-local-storage": "^0.0.1",
    "vxe-table": "^4.0.7-beta.5",
    "vxe-table-plugin-export-xlsx": "^3.0.1",
    "xe-utils": "^3.1.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "less": "^4.1.1",
    "less-loader": "^9.0.0",
    "style-resources-loader": "^1.4.1",
    "vue-cli-plugin-style-resources-loader": "~0.1.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/require-v-for-key": "warn",
      "vue/no-unused-components": "warn",
      "no-unused-vars": "warn"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

升级内容如下：

@antv/layout            ^0.1.14        0.1.14  ❯  0.1.18  https://github.com/antvis/layout
 @antv/x6                ^1.23.6        1.23.6  ❯  1.25.3  https://github.com/antvis/x6
  ant-design-vue          ^2.0.0         2.1.2   ❯  2.2.6   https://www.antdv.com/
  core-js                 ^3.6.5         3.10.1  ❯  3.16.1  https://github.com/zloirock/core-js#readme
 js-base64               ^3.6.0         3.6.0   ❯  3.6.1   https://github.com/dankogai/js-base64#readme
  vue                     ^3.0.0         3.0.11  ❯  3.2.2   https://github.com/vuejs/vue#readme
  vue-router              4              4.0.6   ❯  4.0.11  https://github.com/vuejs/vue-router#readme
  vxe-table               ^4.0.7-beta.5  4.0.10  ❯  4.0.26  https://github.com/x-extends/vxe-table#readme
  xe-utils                ^3.1.12        3.1.13  ❯  3.3.1   https://github.com/x-extends/xe-utils#readme
dev 
◉ @vue/cli-plugin-babel   ~4.5.0         4.5.12  ❯  4.5.13  https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-babel#readme
 ◉ @vue/cli-plugin-eslint  ~4.5.0         4.5.12  ❯  4.5.13  https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint#readme
 ◉ @vue/cli-service        ~4.5.0         4.5.12  ❯  4.5.13  https://cli.vuejs.org/
❯◉ @vue/compiler-sfc       ^3.0.0         3.0.11  ❯  3.2.2   https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme
 ◉ eslint-plugin-vue       ^7.0.0-0       7.9.0   ❯  7.16.0  https://eslint.vuejs.org
 ◉ less-loader             ^9.0.0         9.0.0   ❯  9.1.0   https://github.com/webpack-contrib/less-loader

升级后报错如下

 ERROR  Failed to compile with 3 errors                                                                                                                                       下午1:40:08

 error  in ./node_modules/vxe-table/es/tools/resize.js

Module parse failed: Unexpected token (36:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| export class XEResizeObserver {
>     tarList = [];
|     callback;
|     constructor(callback) {

 @ ./node_modules/vxe-table/es/table/src/table.js 5:0-55 5447:37-54
 @ ./node_modules/vxe-table/es/table/index.js
 @ ./node_modules/vxe-table/es/all.js
 @ ./node_modules/vxe-table/es/index.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.132:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/vxe-table/es/v-x-e-table/src/store.js

Module parse failed: Unexpected token (7:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| export class Store {
>     store = {};
|     mixin(options) {
|         Object.assign(this.store, options);

 @ ./node_modules/vxe-table/es/v-x-e-table/src/hooks.js 1:0-31 2:25-33
 @ ./node_modules/vxe-table/es/v-x-e-table/index.js
 @ ./node_modules/vxe-table/es/all.js
 @ ./node_modules/vxe-table/es/index.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.132:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/vxe-table/es/table/src/columnInfo.js

Module parse failed: Unexpected token (7:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { warnLog, errLog, getFuncText } from '../../tools/utils';
| export class ColumnInfo {
>     title;
|     type;
|     property;

 @ ./node_modules/vxe-table/es/table/src/util.js 3:0-42 140:45-55 140:77-87 143:49-59
 @ ./node_modules/vxe-table/es/table/src/table.js
 @ ./node_modules/vxe-table/es/table/index.js
 @ ./node_modules/vxe-table/es/all.js
 @ ./node_modules/vxe-table/es/index.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.132:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

（必填）请填在线链接： https://codesandbox.io/s/vue-template-916h0 无上面的是假的 （必填）请填写期望的结果： 能够运行起来

（必填）请填写以下信息：

OS: ubuntu20.04
Browser: chrome
vue: 3.2.22
vxe-table: 4.0.26

Xu-C-C commented 3 years ago

您好我也有同样的问题，请问有解决方案吗？

ZHocean123 commented 3 years ago

您好我也有同样的问题，请问有解决方案吗？

需要添加babel插件： yarn add babel-plugin-transform-class-properties -D

在babel.config.js文件中添加transform-class-properties

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    ["transform-class-properties"],
  ],
};

KinedYK commented 3 years ago

您好我也有同样的问题，请问有解决方案吗？

需要添加babel插件： yarn add babel-plugin-transform-class-properties -D

在babel.config.js文件中添加transform-class-properties
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    ["transform-class-properties"],
  ],
};

好像加了也会报同样的错误

shiwanmenghuxiahuashan commented 3 years ago

`import 'xe-utils' import { VXETable,

Header,
Footer,
Icon,
Filter,
Edit,
Menu,
Export,
Keyboard,
Validator,

Column,
Colgroup,
Grid,
Tooltip,
Toolbar,
Pager,
Form,
FormItem,
FormGather,
Checkbox,
CheckboxGroup,
Radio,
RadioGroup,
RadioButton,
Switch,
Input,
Select,
Optgroup,
Option,
Textarea,
Button,
Modal,
List,
Pulldown,
Table

} from 'vxe-table' import 'vxe-table/lib/style.css' function useTable(app) { app.use(Header) .use(Footer) .use(Icon) .use(Filter) .use(Edit) .use(Menu) .use(Export) .use(Keyboard) .use(Validator)

    // 可选组件
    .use(Column)
    .use(Colgroup)
    .use(Grid)
    .use(Tooltip)
    .use(Toolbar)
    .use(Pager)
    .use(Form)
    .use(FormItem)
    .use(FormGather)
    .use(Checkbox)
    .use(CheckboxGroup)
    .use(Radio)
    .use(RadioGroup)
    .use(RadioButton)
    .use(Switch)
    .use(Input)
    .use(Select)
    .use(Optgroup)
    .use(Option)
    .use(Textarea)
    .use(Button)
    .use(Modal)
    .use(List)
    .use(Pulldown)

    .use(Table)

}

const app = createApp(App);

app.use(useTable);

babel.config.js

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "import", { "libraryName": "vxe-table", "style": true } ] ] }

` 以这种方式可以引入。但是感觉4.x各种BUG呢

xuliangzhan commented 3 years ago

该问题在 4.0.27+ 修复

dongasai commented 3 years ago

已验证修复

x-extends / vxe-table

从4.0beta升级到4.0.26后项目无法启动 #1473