How to use mixing in cypress of vue/cli 4 app? - vuejs2

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

Related

quasar failed on RUN quasar build

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

ERROR: Jest: a transform must export a `process` function. STACK: TypeError: Jest: a transform must export a `process` function In VUE Project

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.

Failed to Load Plugin Vue in eslintrc.js When Building

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.

IE returning blank screen even when polyfill configuarations are provided

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 ?

Using 'express' inside Electron main thread, cannot find module

I'm trying to use express library in main.js file. It works fine on my dev build, but when I package the app I get
Error: Cannot find module 'express'
I'm not quite sure how electron main thread works, is it packaged separately by some other build tool, and do I need to define(include) package manually? My app is packaged by webpack, and I have included libraries in package.json. Every sample I have found just includes express library and moves on, I can't find any additional steps for this.
package.json
{
"name": "basic-electron-react-boilerplate",
"version": "0.7.0",
"description": "Minimal and modern react+electron+webpack boilerplate",
"author": "Phillip Barbiero",
"homepage": "https://github.com/pbarbiero/basic-electron-react-boilerplate",
"repository": {
"type": "git",
"url": "https://github.com/pbarbiero/basic-electron-react-boilerplate.git"
},
"build": {
"appId": "your.id",
"mac": {
"category": "your.app.category.type"
}
},
"license": "MIT",
"main": "main.js",
"scripts": {
"prod": "webpack --config webpack.build.config.js && electron --noDevServer .",
"test": "node test.js",
"dev": "webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js",
"build": "webpack --config webpack.build.config.js",
"package": "webpack --config webpack.build.config.js",
"postpackage": "electron-packager ./ --out=./builds",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-es2017": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^8.0.4",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"body-parser": "^1.18.3",
"css-loader": "^0.28.1",
"electron": "^1.7.8",
"electron-builder": "^20.28.4",
"electron-packager": "^9.1.0",
"express": "^4.16.4",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.28.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"request": "^2.88.0",
"style-loader": "^0.19.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"electron-fetch": "^1.2.1",
"electron-require": "^0.3.0",
"express": "^4.16.4",
"faker": "^4.1.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"rc-time-picker": "^3.4.0",
"react-async-script-loader": "^0.3.0",
"react-dropdown": "^1.6.2",
"react-places-autocomplete": "^7.2.0",
"request": "^2.88.0",
"resolve-url-loader": "^3.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.82.5",
"styled-components": "^4.0.2"
}
}
You can run Express server inside Electron. Here is a sample repo for running express inside Electron.
You can fork a child process to run express app as follows
app = require("electron").remote.app),
node = require("child_process").fork(
`${app.getAppPath()}/express-app/bin/www`,
[],
{
stdio: ["pipe", "pipe", "pipe", "ipc"]
});
The express app used here is a generated one using express-generator.
The problem with your approach is that you are maintaining a single package.json file for both Electron and Express. Checkout Electron-React-Boilerplate, here i have two separate npm installation locations one is for Electron alone and other is for React stuffs. Electron-packager and Electron-builder works using this pattern. This is the reason why your process on main thread throws
Error: Cannot find module 'express'