Dockerfile runs RUN npm run build which runs vue-cli-service build. After some time, I get an error from .eslintrc.js:
Failed to load plugin 'vue' declared in '.eslintrc.js': createRequire is not a function. Build does not get completed because of this issue.
This issue does not occur if I run npm run build manually. Why do I get this issue and How can I resolve it?
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '#vue/airbnb', '#vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'consistent-return': 0,
'import/extensions': 0,
'import/no-extraneous-dependencies': 0,
'no-param-reassign': 0,
'no-alert': 0,
'no-unused-expressions': 0,
'no-shadow': 0,
'no-return-assign': 0
},
plugins: ['prettier'],
parserOptions: {
parser: 'babel-eslint'
}
};
package.json:
{
"name": "web",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "vue-cli-service serve"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"date-fns": "^2.14.0",
"humps": "^2.0.1",
"izitoast": "^1.4.0",
"lamejs": "^1.2.0",
"pug-plain-loader": "^1.0.0",
"register-service-worker": "^1.7.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue": "^2.6.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.3.1",
"#vue/cli-plugin-eslint": "^4.3.1",
"#vue/cli-plugin-pwa": "^4.3.1",
"#vue/cli-service": "^4.3.1",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^4.0.0",
"eslint": "^7.0.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"expose-loader": "^0.7.5",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.1",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3",
"webpack-bundle-analyzer": "^3.8.0"
}
}
Have you run npm run install to install all the dependencies before running npm run build?
If yes, maybe you need to add some code into your .eslintrc file:
"parser": "vue-eslint-parser",
Finally, you may also need to add the npm package named 'prettier' to make it works.
Related
I want to build quasar project with command quasar build. The compile progress goes to 100% but I get the error after build:
App · ⚠️ 1 error encountered:
./node_modules/htmlparser2/lib/esm/index.js 59:9
Module parse failed: Unexpected token (59:9)
File was processed with these loaders:
* ./node_modules/#quasar/app/lib/webpack/loader.transform-quasar-imports.js
You may need an additional loader to handle the result of these loaders.
| return getFeed(parseDOM(feed, options));
| }
> export * as DomUtils from "domutils";
| // Old name for DomHandler
| export { DomHandler as DefaultHandler };
# ./node_modules/sanitize-html/index.js 1:19-41
# ./node_modules/vue-sanitize/dist/vue-sanitize.js
# ./src/boot/sanitize.ts
# ./.quasar/client-entry.js
# multi ./.quasar/client-entry.js
App · ⚠️ [FAIL] Build failed with 1 error. Check log above.
This is my package.json:
{
"name": "rfasdef",
"version": "0.0.1",
"description": "",
"productName": "",
"cordovaId": "",
"capacitorId": "",
"author": "",
"private": true,
"scripts": {
"lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"#types/file-saver": "^2.0.5",
"#types/jwt-decode": "^3.1.0",
"axios": "^0.18.1",
"crypto-js": "^4.0.0",
"echarts": "^4.6.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"jalaali-js": "^1.2.3",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"moment-duration-format": "^2.3.2",
"moment-jalaali": "^0.9.6",
"num2persian": "^3.2.2",
"persianjs": "^0.4.0",
"qjdatetime": "^1.1.0",
"quasar": "^1.9.5",
"sass": "^1.45.0",
"vue-echarts": "^5.0.0-beta.0",
"vue-i18n": "^8.0.0",
"vue-persian-datetime-picker": "^2.10.1",
"vue-sanitize": "^0.2.0"
},
"devDependencies": {
"#quasar/app": "^1.6.2",
"#quasar/quasar-app-extension-dotenv": "^1.0.1",
"#types/lodash": "^4.14.150",
"#types/moment-jalaali": "^0.7.5",
"#types/node": "^10.17.15",
"#typescript-eslint/eslint-plugin": "^2.17.0",
"#typescript-eslint/parser": "^2.17.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.1.2",
"vue-property-decorator": "^8.3.0",
"vuex-class": "^0.3.2",
"vuex-module-decorators": "^0.11.0"
},
"engines": {
"node": ">= 10.18.1",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
},
"browserslist": [
"last 1 version, not dead, ie >= 11"
],
"resolutions": {
"#babel/parser": "7.7.5"
}
}
It was working yesterday but today it's not working!
I tried installing packages with both yarn and npm. But its not working.
Try this:
Deleting package-lock.json and folder node_modules
then run npm install or yarn install
then run quasar build
When I install Vuetable. ( npm install vuetable-2#next --save ) I get the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_51_20_971Z-debug.log
PS x\Desktop\dd\frontend> npm start serve
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_52_32_164Z-debug.log
I tried to remove the node_modules folder and install it again. Also I tried, npm clean cache --force but still get the same error. How can I fix it?
This is my package.json file :
{
"name": "architectui-vue-pro",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^11.2.0",
"#ckeditor/ckeditor5-vue": "^1.0.1",
"#fancyapps/fancybox": "^3.5.7",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#fortawesome/free-solid-svg-icons": "^5.8.1",
"#fortawesome/vue-fontawesome": "^0.1.6",
"animate-sass": "^0.8.2",
"apexcharts": "^3.6.7",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.18",
"chart.js": "^2.8.0",
"countup.js": "^1.9.3",
"css-file-icons": "0.0.7",
"es6-promise": "^4.2.6",
"increase-memory-limit": "^1.0.6",
"leaflet": "^1.4.0",
"linearicons": "^1.0.1",
"material-design-icons-iconfont": "^4.0.5",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.31",
"node-sass": "^4.11.0",
"pdfjs": "^2.3.8",
"pe7-icon": "^1.0.4",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.15.0",
"quill": "^1.3.6",
"sass-loader": "^7.1.0",
"sweetalert": "^2.1.2",
"toastr": "^2.1.4",
"v-mask": "^1.3.3",
"vee-validate": "^2.2.3",
"vue": "^2.6.10",
"vue-apexcharts": "^1.3.4",
"vue-chartjs": "^3.4.2",
"vue-clipboards": "^1.2.4",
"vue-color": "^2.7.0",
"vue-country-flag": "^1.1.0",
"vue-countup-v2": "^2.0.0",
"vue-cropperjs": "^3.0.0",
"vue-element-loading": "^1.1.1",
"vue-fancybox": "^1.0.3",
"vue-form-wizard": "^0.8.4",
"vue-full-calendar": "^2.7.0",
"vue-js-toggle-button": "^1.3.2",
"vue-ladda": "0.0.15",
"vue-multiselect": "^2.1.4",
"vue-notifications": "^0.9.0",
"vue-pdf": "^4.0.8",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-rate": "^2.2.0",
"vue-router": "^3.0.5",
"vue-select": "^2.6.4",
"vue-session": "^1.0.0",
"vue-sidebar-menu": "^3.7.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "^2.8.16",
"vue-sparklines": "^0.1.9",
"vue-spinkit": "^1.7.12",
"vue-spinner": "^1.0.4",
"vue-sticky-directive": "0.0.8",
"vue-tabs-with-active-line": "^1.1.4",
"vue-textarea-autosize": "^1.0.4",
"vue-toastr": "^2.0.16",
"vue2-animate": "^2.1.0",
"vue2-circle-progress": "^1.2.3",
"vue2-datepicker": "^2.11.0",
"vue2-dropzone": "^3.5.8",
"vue2-google-maps": "^0.10.6",
"vue2-leaflet": "^1.2.3",
"vuelidate": "^0.7.4",
"vuetable-2": "^2.0.0-beta.4",
"vuetify": "^1.5.5",
"vuetrend": "^0.3.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
You are missing the start script. Add this to your package.json
"scripts": {
"start": "vue-cli-service start",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
ERROR: Jest: a transform must export a process function. STACK: TypeError: Jest: a transform must export a process function In VUE Project
I am trying to run Unit-test my test is passing but it's failing while collecting coverages. I have added jest-config file and all unit-test related packages. Please help, Did i missed any package here??
Package.json
{
"name": "#ava-t2/questionnaire-ui",
"version": "1.0.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:ci": "npm run test:unit --reporters=default --reporters=jest-junit",
"test:e2e": "vue-cli-service test:e2e",
"build:lib": "vue-cli-service build --target lib --name questionnaire-ui src/plugin.ts --mode production",
"pretty-quick": "pretty-quick",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"main": "dist/questionnaire-ui.umd.js",
"browser": "dist/questionnaire-ui.common.js",
"unpkg": "dist/questionnaire-ui.umd.min.js",
"dependencies": {
"#ava-ui/tailwind-plugin": "^1.1.3",
"#azure/abort-controller": "^1.0.1",
"#azure/storage-blob": "^12.2.0-preview.1",
"#babel/core": "^7.12.10",
"#popperjs/core": "^2.5.4",
"#types/jest": "^24.9.1",
"#types/jspdf": "^1.3.3",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"apisauce": "^2.0.1",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"axios-retry": "^3.1.9",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.5.0",
"core-js": "^3.6.4",
"file-saver": "^2.0.5",
"html2pdf.js": "^0.9.2",
"jest-junit": "^12.2.0",
"jspdf": "^2.3.1",
"lodash": "^4.17.21",
"marked": "^2.0.1",
"node-sass": "^5.0.0",
"postcss": "^7.0.35",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.0",
"single-spa-vue": "^2.1.0",
"ts-jest": "^26.5.0",
"v-click-outside": "^3.1.2",
"vee-validate": "^3.4.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-html-secure": "^1.0.9",
"vue-loader": "^15.9.6",
"vue-property-decorator": "^8.4.1",
"vue-svg-loader": "^0.16.0",
"vuex": "^3.1.3",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"#types/lodash": "^4.14.168",
"#types/marked": "^1.2.1",
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "^4.5.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "^4.5.0",
"#vue/test-utils": "^1.0.3",
"husky": "^4.2.5",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"single-spa": "^5.8.2",
"svg-url-loader": "^6.0.0",
"systemjs-webpack-interop": "^2.3.3",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"tslint": "^6.1.2",
"typescript": "^3.9.3",
"vue": "^2.6.12",
"vue-cli-plugin-single-spa": "^2.1.0",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged tslint . --fix"
}
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
Jest-config file
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
moduleFileExtensions: ["js", "ts", "json", "vue"],
modulePaths: ["./src"],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "#vue/cli-plugin-unit-jest/node_modules/ts-jest",
"^.+\\.svg$": "<rootDir>/src/svgTransform.js",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,vue}",
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/coverage/**",
"!**/index.js"
],
coverageReporters: ["text", "cobertura"],
reporters: ["default", "jest-junit"]
};
According to this discussion, you need jest and ts-jest to be the same versions.
In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source
Hi I have build a webcomponent using vue. It is working perfectly in chrome . But it is returning a blank screen in IE 11. I have given babel configuaration . I think the issue is the arrow operator not getting transpilled.
package.json
{
"name": "web-component-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:prod": "vue-cli-service build --target wc --name email-compose ./src/views/EmailCompose.vue"
},
"dependencies": {
"axios": "^0.19.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"core-js": "^3.6.4",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"query-string": "^5.1.1",
"vue": "^2.6.11",
"webcomponentsjs": "^1.0.2"
},
"devDependencies": {
"#babel/preset-env": "^7.8.4",
"#vue/cli-plugin-babel": "~4.2.0",
"#vue/cli-service": "~4.2.0",
"#webcomponents/webcomponentsjs": "^2.4.2",
"copy-webpack-plugin": "^5.1.1",
"vue-template-compiler": "^2.6.11",
"webpack-cli": "^3.3.11"
}
}
babel.config.js
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise', // already default included now
'es6.array.iterator', // already default included now
'es6.symbol',
'es6.object.assign'
]
}]
]
}
is this due to vue-wc-wrapper.js ? should I add that to transpile dependencies ?