When I try to run build on my project using vueJS, the terminal return error as below
Error when run npm run build
Code % npm run build
> view@1.1.0 build
> vue-cli-service build --no-clean
WARN A new version of sass-loader is available. Please upgrade for best experience.
⠹ Building for production...
ERROR Failed to compile with 2 errors 2:32:15 PM
error in ./node_modules/survey-core/defaultV2.min.css
Syntax Error: JisonParserError: Parse error on line 1:
...--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))))
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
@ ./node_modules/survey-core/defaultV2.min.css 4:14-188
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.transform-quasar-imports.js!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--1-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/setting-webform/webform.vue?vue&type=script&lang=js&
@ ./src/components/setting-webform/webform.vue?vue&type=script&lang=js&
@ ./src/components/setting-webform/webform.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.transform-quasar-imports.js!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--1-1!./node_modules/vue-loader/lib??vue-loader-options!./src/module/settings/template/index.vue?vue&type=script&lang=js&
@ ./src/module/settings/template/index.vue?vue&type=script&lang=js&
@ ./src/module/settings/template/index.vue
@ ./src/router.js
@ ./src/index.js
@ multi ./src/index.js
error in ./node_modules/survey-core/modern.min.css
Syntax Error: JisonParserError: Parse error on line 1:
...--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))))
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
@ ./node_modules/survey-core/modern.min.css 4:14-185
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.transform-quasar-imports.js!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--1-1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/setting-webform/webform.vue?vue&type=script&lang=js&
@ ./src/components/setting-webform/webform.vue?vue&type=script&lang=js&
@ ./src/components/setting-webform/webform.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-cli-plugin-quasar/lib/loader.transform-quasar-imports.js!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--1-1!./node_modules/vue-loader/lib??vue-loader-options!./src/module/settings/template/index.vue?vue&type=script&lang=js&
@ ./src/module/settings/template/index.vue?vue&type=script&lang=js&
@ ./src/module/settings/template/index.vue
@ ./src/router.js
@ ./src/index.js
@ multi ./src/index.js
ERROR Build failed with errors.
I try to implement the suggestion from https://surveyjs.answerdesk.io/ticket/details/t13426 but still got the same error.
below is my package.json
Code{
"name": "view",
"version": "1.1.0",
"private": true,
"description": "Desc",
"author": "aut",
"scripts": {
"build": "vue-cli-service build --no-clean",
"build-debug": "vue-cli-service build --no-clean --modern --debug",
"watch": "vue-cli-service build --watch --no-clean"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
"@fullcalendar/core": "^4.3.1",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/moment": "^4.3.0",
"@fullcalendar/moment-timezone": "^4.3.0",
"@fullcalendar/resource-timegrid": "^4.3.0",
"@fullcalendar/resource-timeline": "^4.3.0",
"@fullcalendar/vue": "^4.3.1",
"@quasar/extras": "^1.0.0",
"@riophae/vue-treeselect": "^0.4.0",
"@tinymce/tinymce-vue": "^3.2.6",
"aws-s3-pro": "^1.0.4",
"bootstrap-timepicker": "^0.5.2",
"core-js": "^3.4.5",
"fuse.js": "^3.6.1",
"humanize-duration": "^3.25.1",
"humanparser": "^1.11.0",
"moment-range": "^4.0.2",
"luxon": "^1.28.1",
"offline-js": "^0.7.19",
"prettier": "^2.0.5",
"quasar": "^1.15.0",
"survey-creator-knockout": "^1.9.93",
"text-security": "^1.2.0",
"uniqid": "^5.2.0",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-contenteditable": "^1.0.2",
"vue-fullscreen": "^2.1.6",
"vue-gtag": "^1.16.1",
"vue-image-markup": "^3.2.0",
"vue-moment": "^4.1.0",
"vue-property-decorator": "^8.3.0",
"vue-scrollto": "^2.18.2",
"vue-select": "^3.9.0",
"vue-simple-suggest": "^1.10.2",
"vue-socket.io-extended": "^4.0.1",
"vuex": "^3.1.2"
},
"devDependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.7.4",
"@ryancavanaugh/jquery.simplepagination": "^1.4.13-alpha",
"@vue/babel-preset-app": "^3.12.1",
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-eslint": "^4.3.1",
"@vue/cli-plugin-unit-jest": "^4.5.11",
"@vue/cli-plugin-vuex": "^4.3.1",
"@vue/cli-service": "^4.3.1",
"@vue/test-utils": "1.0.0-beta.29",
"axios": "^0.22.0",
"babel-eslint": "^10.0.3",
"bootstrap-vue": "^2.2.2",
"cross-env": "^5.2.1",
"current-script-polyfill": "^1.0.0",
"dotenv-webpack": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-prettier-vue": "^2.0.2",
"eslint-plugin-vue": "^7.0.1",
"expose-loader": "^0.7.5",
"famfamfam-silk": "^1.0.0",
"filemanager-webpack-plugin": "^3.1.0",
"git-revision-webpack-plugin": "^3.0.4",
"graceful-fs": "^4.2.3",
"html-webpack-harddisk-plugin": "^1.0.1",
"jquery": "^3.5.1",
"mezr": "^0.6.2",
"moment": "^2.29.4",
"moment-timezone": "^0.5.38",
"node-sass": "^4.14.1",
"numeral": "^2.0.6",
"postcss-rtl": "^1.2.3",
"promise-polyfill": "^8.1.3",
"promise.prototype.finally": "^3.1.1",
"sass-loader": "^7.3.1",
"script-ext-html-webpack-plugin": "^2.1.4",
"socket.io-client": "^2.3.0",
"style-loader": "^0.23.1",
"url-polyfill": "^1.1.7",
"vee-validate": "^2.2.15",
"velocity-animate": "^1.5.2",
"vue-bootstrap-datetimepicker": "^5.0.1",
"vue-cli-plugin-quasar": "^3.0.1",
"vue-cookies": "^1.5.13",
"vue-eslint-parser": "^7.0.0",
"vue-google-autocomplete": "^1.1.0",
"vue-i18n": "^8.15.1",
"vue-lodash": "^2.0.2",
"vue-material-design-icons": "^3.4.0",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-socket.io": "^3.0.7",
"vue-spinner": "^1.0.3",
"vue-template-compiler": "^2.5.21",
"vuedraggable": "^2.24.3",
"webpack-cli": "^3.3.10"
},
"prettier": {
"tabWidth": 4,
"jsxBracketSameLine": true,
"useTabs": false,
"trailingComma": "none",
"arrowParens": "avoid"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"cssnano": {
"preset": [
"default",
{
"calc": false
}
]
},
"browserslist": [
"> .05%",
"iOS >= 9",
"last 2 versions",
"not ie <= 8",
"Firefox > 50"
]
}
So what I supposed to do now?