Question T13637
Visible to All Users

VueJs build return error

created 2 years ago (modified 2 years ago)

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?

Answers approved by surveyjs Support

created 2 years ago

Hello,
As suggested in this GitHub comment, to fix the issue, it is required to disable postcss-calc in package.json.

JSON
"cssnano": { "preset": [ "default", { "calc": false } ] }

It seems that you've already disabled this option, however, the issue remains. Would you please share a problematic sample so that I can reproduce the issue on my side?

    Comments (1)

      Hi, as for now, the problem is solved. I remove the code that disable postcss-calc above and called the modern.min.css and defaultV2.min.css from the index.html instead of my vue component