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
I'm testing a React Native app.
I run jest --coverage and I get 233 files:
I still get the coverage file and I can see the coverage through index.html.
But why the other files.
Here is the package.json
{
"name": "entoutonika",
"version": "0.0.1",
"private": true,
"scripts": {
"8": "react-native run-ios --simulator=\"iPhone 8 Plus\" ",
"11": "react-native run-ios --simulator=\"iPhone 11 Pro Max\" ",
"ios": "react-native run-ios",
"and": "react-native run-android",
"se": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\" ",
"ipad13": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (5th generation)\" ",
"air": "react-native run-ios --simulator=\"iPad Air (4th generation)\" ",
"start": "react-native start",
"test": "jest --runInBand --detectOpenHandles --forceExit",
"watch": "jest --watch",
"cov": "jest --coverage",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "npx tsc",
"checkformat": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
"prepare": "npm run typecheck && lint-staged && husky install",
"postinstall": "npx typesync"
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/netinfo": "^7.1.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/elements": "^1.2.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"firebase": "^9.4.1",
"formik": "^2.2.9",
"lottie-react-native": "^4.1.3",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-bootsplash": "^4.0.2",
"react-native-code-push": "^7.0.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.3.0",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"typescript": "^4.4.4",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-typescript": "^7.16.7",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#testing-library/jest-native": "^4.0.4",
"#testing-library/react": "^12.1.2",
"#testing-library/react-native": "^9.0.0",
"#types/babel__core": "^7.1.16",
"#types/eslint": "^7.28.2",
"#types/jest": "^26.0.24",
"#types/mocha": "^9.0.0",
"#types/react": "17.0.2",
"#types/react-native": "^0.65.0",
"#types/react-native-vector-icons": "^6.4.9",
"#types/react-redux": "^7.1.20",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.1.0",
"#typescript-eslint/parser": "^5.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-testing-library": "^5.0.5",
"husky": "^7.0.0",
"jest": "^26.6.3",
"jest-fetch-mock": "^3.0.3",
"lint-staged": ">=10",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^17.0.2",
"redux-devtools-extension": "^2.13.9"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"verbose": true,
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFilesAfterEnv": [
"#testing-library/jest-native/extend-expect"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"moduleDirectories": [
"node_modules",
"src"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
"setupFiles": [
"./setupJest.js"
]
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{js,jsx,ts,tsx, json}": "prettier --write"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
What I do now is check the coverage, and then delete all the files.
I don't have this issue with React projects.
Is there something wrong with the configuration?
Those files are expected since are part of the repo itself so you can see lines of code covered by your tests etc.
You need to add the folder where those are generated into your .gitignore since the whole coverage shouldn't be tracked in your repo.
so i am trying to run this react-native app built on expo i am having trouble configuring things.
here's my .babelrc
{
"presets": ["#babel/preset-env","#babel/react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
my package.json
{
"name": "APP NAME",
"version": "0.1.0",
"private": true,
"devDependencies": {
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.25.1",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"jest-expo": "^37.0.0",
"react-native-debugger-open": "^0.3.17",
"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"lint": "eslint --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ignore-path .gitignore .",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js",
"debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#react-native-community/viewpager": "^3.3.0",
"axios": "^0.18.0",
"babel-preset-react-native": "^4.0.1",
"date-fns": "^1.29.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"expo": "^37.0.0",
"lodash": "^4.17.10",
"prop-types": "^15.6.2",
"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-app-intro-slider": "^0.2.4",
"react-native-chart-kit": "^1.2.1",
"react-native-datepicker": "^1.7.2",
"react-native-hr-component": "^1.0.6",
"react-native-mock-render": "^0.1.2",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-paystack": "^3.1.4",
"react-native-picker-select": "^5.1.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-tab-view": "^2.14.0",
"react-native-vector-icons": "^4.6.0",
"react-native-webview-bridge": "^0.33.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.3",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.2.0",
"styled-components": "^3.2.3",
"whatwg-fetch": "^2.0.4"
}
}
so at first i had an error like
node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Plugin/Preset files are not allowed to export objects, only functions. In node_modules/babel-preset-expo/index.js
this got fixed when i remove "babel-preset-expo" from my .babelrc and replaced it with the above content now i am having another error like this:
SyntaxError: /node_modules/react-native-scrollable-tab-view/node_modules/#react-native-community/viewpager/js/index.js: Unexpected token (10:12)
8 | */
9 |
> 10 | import type {PageScrollState as _PageScrollState} from './types';
| ^
11 | import type {PageScrollEvent as _PageScrollEvent} from './types';
12 | import type {PageScrollStateChangedEvent as _PageScrollStateChangedEvent} from './types';
13 | import type {PageSelectedEvent as _PageSelectedEvent} from './types';
Failed building JavaScript bundle
so any ideas why this is happening and how to fix it would be appreciated. Thanks
EDIT:
okay so i have added "react-native" to the babel presets array and the previous error i gone but now i got a new error saying:
node_modules/react-navigation-deprecated-tab-navigator/node_modules/react-native-tab-view/src/TabViewPagerExperimental.js: Cannot read property 'bindings' of null
If there is no .babel.rc present, you can create your own. Add whatever else you may need in there just as you would with .babelrc and it should work. I tried this out yesterday on my Expo managed RN app and it seems to have worked.
// Filename: .babelrc
{
"presets": ["babel-preset-expo"],
"plugins": ["transform-decorators-legacy"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Edit: This was initial answer...
Expo can be created with two workflows. You would get a .babelrc for a bare workflow, and a babel.config.js for a managed workflow.
If you have "babel.config.js" you could try the following instead of worrying about .babelrc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["babel-plugin-proposal-class-properties"]
};
};
I have an year old VueJS project that runs on v3.9.2 of #vue/cli-service. I have been running it on https://localhost:8000 using the --https flag of vue-cli-service command.
Now, I updated my #vue/cli-service package to v3.12.1. When I run npm run serve, I get the following error in Chrome. There is no button to proceed to localhost.
Can anyone tell me what has changed in Vue cli service that this error is showing up and how can I fix this error?
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
"prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
"build": "npm run generate && vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-check": "vue-cli-service lint --no-fix",
"serve": "vue-cli-service --https --port 8000 serve --host localhost",
"postinstall": "postinstall",
"test": "jest --changedSince=master --coverage",
"test-ci": "jest --ci",
"test-watch": "npm run generate && jest --watch --no-coverage",
"test-e2e": "cypress run --browser chrome",
"test-e2e-headless": "cypress run",
"test-e2e-dev": "cypress open"
},
"dependencies": {
"#babel/polyfill": "^7.0.0-rc.1",
"can-ndjson-stream": "^1.0.0",
"color-convert": "^2.0.0",
"filesize": "^4.1.2",
"intro.js": "^2.9.3",
"jsonpath": "^1.0.1",
"lodash": "^4.17.11",
"luxon": "^1.11.4",
"papaparse": "^4.6.3",
"sass-loader": "^8.0.0",
"search-query-parser": "^1.5.2",
"vue": "^2.5.21",
"vue-i18n": "^8.8.1",
"vue-introjs": "^1.3.2",
"vue-router": "^3.0.1",
"vue2-dropzone": "^3.5.2",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.12",
"vuex": "^3.0.1",
"vuex-i18n": "^1.11.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-babel": "3.12.1",
"#vue/cli-plugin-eslint": "3.12.1",
"#vue/cli-service": "3.12.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"cypress": "^3.4.1",
"eslint": "^5.8.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"fs-extra": "^8.0.1",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"postinstall": "^0.4.2",
"regenerator-runtime": "^0.13.1",
"sass": "^1.23.7",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-analyzer": "^3.3.2",
"worker-loader": "^2.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"postinstall": {
"generator/acl_actions.csv": "link public/acl_actions.csv",
"generator/acl_fields.csv": "link public/acl_fields.csv"
}
}
OS: Ubuntu 18.04
Same thing happens if I create a fresh project as well. Both new and old projects work in Firefox.
The bug was introduced in webpack-dev-server version 3.9: https://github.com/webpack/webpack-dev-server/issues/2313
I managed to use the older version without the bug by adding to dependencies:
"webpack-dev-server": "3.8.2"
And changing the version of #vue/cli-service in devDependencies (note the tilde)
"#vue/cli-service": "~4.0.0",
Then removed node_modules, package-lock before doing npm install and npm run serve
Hope this helps you
IF certification error is triggered from browser not reaching a valid signature in that machine, try generate a new one:
How to create a self-signed certificate with OpenSSL
other possibility is to make Chrome ignore absence of certifications:
in Chrome address bar :
chrome://flags/#allow-insecure-localhost
(answer from: technipages )
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'