I used attached example
and it works only building by yarn.
With npm I was getting build error
npm ERR
! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR!While resolving: quickstart@1.0.0
npm ERR!Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"^2.5.11"from the root project
npm ERR!
npm ERR!Couldnot resolve dependency:
npm ERR! peer vue@"^3.0.0"from vue-class-component@8.0.0-rc.1
npm ERR! node_modules/vue-class-component
npm ERR! vue-class-component@"^8.0.0-rc.1"from the root project
npm ERR!
npm ERR!Fix the upstream dependency conflict,orretry
npm ERR!this command with--force,or--legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Then
I modify the package.json with libs i'm using in my project.
{
"name": "quickstart",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue-class-component": "^8.0.0-rc.1",
"@babel/polyfill": "^7.4.4",
"@fortawesome/fontawesome-free": "^5.13.0",
"@mdi/font": "^3.6.95",
"@popperjs/core": "^2.5.4",
"@syncfusion/ej2-base": "^19.2.0",
"@syncfusion/ej2-vue-buttons": "^19.2.0",
"@syncfusion/ej2-vue-calendars": "^19.2.0",
"@syncfusion/ej2-vue-dropdowns": "^19.2.0",
"@syncfusion/ej2-vue-grids": "^19.2.55",
"@syncfusion/ej2-vue-inputs": "^19.2.0",
"@syncfusion/ej2-vue-navigations": "^19.2.0",
"apexcharts": "^3.22.2",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"bootstrap": "^4.5.0",
"bootstrap-icons": "^1.5.0",
"bootstrap-icons-vue": "^0.7.0",
"bootstrap-vue": "^2.19.0",
"clipboard": "^2.0.6",
"core-js": "^3.7.0",
"deepmerge": "^4.2.2",
"highlight.js": "^9.18.1",
"line-awesome": "^1.3.0",
"moment-timezone": "^0.5.31",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.5.0",
"portal-vue": "^2.1.7",
"roboto-fontface": "*",
"secure-ls": "^1.2.6",
"socicon": "^3.0.5",
"sweetalert2": "^9.10.12",
"tooltip.js": "^1.3.2",
"vue": "2.6.12",
"vue-apexcharts": "^1.5.3",
"vue-axios": "^2.1.4",
"vue-highlight.js": "^3.1.0",
"vue-i18n": "^8.17.4",
"vue-inline-svg": "^1.3.0",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.4.9",
"vue2-perfect-scrollbar": "^1.5.0",
"vuedraggable": "^2.24.3",
"vuejs-dialog": "^1.4.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.3.16",
"vuex": "^3.3.0",
"vuex-persistedstate": "^3.0.1"
},
"devDependencies": {
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-eslint": "^4.3.1",
"@vue/cli-service": "^4.3.1",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/eslint-config-typescript": "^5.0.2",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^5.0.0",
"sass": "1.32.13",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "2.6.12",
"vuetify-loader": "^1.3.0",
"webpack-cli": "^3.3.11",
"webpack-messages": "^2.0.4",
"cross-env": "^5.0.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-rtl-plugin": "^2.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"_devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
Other code stay the same, after that I start getting vue3 related warnings in console like this:
WARNING in ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
387:27-30 "export 'ref' was not found in 'vue'
@ ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/grid/columns.directive.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/index.js
@ ./node_modules/@syncfusion/ej2-vue-grids/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
WARNING in ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
402:35-44 "export 'proxyRefs' was not found in 'vue'
@ ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/grid/columns.directive.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/index.js
@ ./node_modules/@syncfusion/ej2-vue-grids/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
WARNING in ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
407:31-40 "export 'proxyRefs' was not found in 'vue'
@ ./node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/grid/columns.directive.js
@ ./node_modules/@syncfusion/ej2-vue-grids/src/index.js
@ ./node_modules/@syncfusion/ej2-vue-grids/index.js
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Can you let me know how fix them, and is there way to stay on vue2
