Related
I tried to install better-docs but received the following error. Seems like the better-docs is not compatible with the react v.17? How do you guys work with JSDoc with React 17? Any advice helps, thank you.
The below is the error report.
.npm/eresolve-report.txt
npm resolution error report
2021-11-22T05:56:23.456Z
While resolving: react-tsx#0.1.0
Found: react#17.0.2
node_modules/react
react#"^17.0.2" from the root project
Could not resolve dependency:
peer react#"^16.0.0" from better-docs#2.3.2
node_modules/better-docs
better-docs#"*" from the root project
Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "17.0.2",
"whileInstalling": {
"name": "react-tsx",
"version": "0.1.0",
"path": "/Users/Projects/salon/react-tsx"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "^16.0.0",
"error": "INVALID",
"from": {
"name": "better-docs",
"version": "2.3.2",
"whileInstalling": {
"name": "react-tsx",
"version": "0.1.0",
"path": "/Users/Projects/salon/react-tsx"
},
"location": "node_modules/better-docs",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "better-docs",
"spec": "*",
"from": {
"location": "/Users/Projects/salon/react-tsx"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
package.json
{
"name": "react-tsx",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.1.1",
"#mui/lab": "^5.0.0-alpha.54",
"#mui/material": "^5.1.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-router-dom": "^5.3.2",
"date-fns": "^2.25.0",
"jsdoc": "^3.6.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-router-dom": "^6.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "tsc",
"test": "react-scripts test",
"eject": "react-scripts eject",
"docs": "jsdoc -c jsdoc.conf.json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"typescript": "^4.4.4"
}
}
This error happens when trying to view the app in expo.
Unable to resolve "./ErrorRecovery/ErrorRecovery" from "node_modules/expo/build/ExpoLazy.js"
Failed building JavaScript bundle.
I have expo sdk 36.0.0
expo-cli 3.13.8
Running on macOS 10.15.5
I have already deleted node_modules package-lock.json yarn.lock .expo. Then npm install.
I also cleared cache npm cache clear -f and running with expo start -c
Unable to resolve "./ErrorRecovery/ErrorRecovery" from "node_modules/expo/build/ExpoLazy.js"
Failed building JavaScript bundle.
package.json
{
"scripts": {
"postinstall": "jetify && jetify",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "sudo react-native start --reset-cache",
"test": "jest"
},
"dependencies": {
"#react-native-community/async-storage": "^1.8.1",
"#react-native-community/blur": "^3.6.0",
"events": "^3.1.0",
"expo": "^36.0.0",
"expo-barcode-scanner": "~8.0.0",
"expo-blur": "~8.0.0",
"expo-font": "~8.0.0",
"expo-camera": "~8.0.0",
"expo-linear-gradient": "~8.0.0",
"expo-location": "~8.0.0",
"expo-permissions": "~8.0.0",
"expo-secure-store": "~8.0.0",
"hermesvm": "^0.1.1",
"http": "0.0.0",
"jwt-decode": "^2.2.0",
"native-base": "^2.13.8",
"node-libs-browser": "^2.2.1",
"node-libs-react-native": "~1.2.0",
"react": "16.9.0",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-camera": "^3.19.0",
"react-native-collapsible": "^1.5.1",
"react-native-credit-card-input": "^0.4.1",
"react-native-crypto-js": "^1.0.0",
"react-native-elements": "^1.2.7",
"react-native-extra-dimensions-android": "^1.2.5",
"react-native-gesture-handler": "^1.3.0",
"react-native-global-props": "^1.1.5",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-maps": "~0.26.1",
"react-native-masked-text": "^1.13.0",
"react-native-modal": "^11.5.4",
"react-native-reanimated": "~1.4.0",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-scroll-bottom-sheet": "^0.6.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-swipe-gestures": "^1.0.5",
"react-native-swipe-list-view": "^2.3.0",
"react-native-swiper": "^1.6.0-rc.3",
"react-native-unimodules": "~0.6.0",
"react-native-vector-icons": "^6.6.0",
"stripe-client": "^1.1.5"
},
"devDependencies": {
"#babel/core": "^7.8.7",
"#types/react": "^16.9.23",
"#types/react-native": "^0.57.65",
"babel-jest": "24.9.0",
"babel-preset-expo": "^7.1.0",
"jest": "24.9.0",
"jest-expo": "^36.0.0",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "0.56.0",
"react-test-renderer": "16.9.0",
"reactotron-react-native": "^4.0.3",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native"
},
"private": true
}
app.json
{
"name": "MyAmazingApp",
"displayName": "MyAmazingApp",
"expo": {
"scheme": "MyAmazingApp-app",
"name": "MyAmazingApp",
"icon": "Design/MyAmazingApp_app_icon.png",
"version": "1.0.0",
"slug": "MyAmazingApp",
"sdkVersion":"36.0.0",
"orientation": "portrait",
"androidStatusBar": {
"backgroundColor": "#FFFFFF",
"translucent": false
},
"ios": {
"bundleIdentifier": "com.me.MyAmazingApp",
"buildNumber": "0.0.4",
"icon": "Design/MyAmazingApp_app_icon.png"
},
"android": {
"package": "com. MyAmazingApp",
"versionCode": 1,
"config": {
"googleSignIn": {
"apiKey": "”
},
"googleMaps": {
"apiKey": ""
}
},
"googleServicesFile": "./google-services.json",
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": "*.MyAmazingApp.com",
"pathPrefix": "/restaurant/handleBarcode"
}
],
"category": [
"BROWSABLE",
"DEFAULT"
]
}
]
},
"splash": {
"image": "Design/MyAmazingApp_app_splash.png",
"backgroundColor": "#FFFFFF",
"resizeMode": "cover"
},
"privacy": "unlisted",
"entryPoint": "node_modules/expo/AppEntry.js",
"platforms": [
"ios",
"android",
],
"notification": {
"icon": "./Design/notification_logo.png",
"color": "#0CD2C5",
"androidMode": "default",
"iosDisplayInForeground": true
}
}
}
i’m fairly confused about what i am looking at here - this does not appear an expo managed project or an expokit project, but you are running expo start still.. it may be worth reverting to your last known working commit and going from there
{
"name": "ClientApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "~7.1.0",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "2.2.3",
"popper.js": "^1.14.5",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26",
"angular": "1.5.5",
"angular-animate": "1.5.5",
"angular-aria": "1.5.7",
"angular-cookies": "1.5.5",
"angular-mocks": "1.5.5",
"angular-sanitize": "1.5.5",
"angular-scroll": "1.0.2",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-grid": "4.0.4",
"angular-ui-router": "1.0.3",
"animate": "1.0.0",
"animate.css": "3.5.2",
"jquery-ui": "1.12.1",
"jquery.inputmask": "3.3.4",
"lodash": "4.17.11",
"ionicons": "2.0.1",
"moment": "2.13.0",
"ng-mask": "3.1.1",
"spin.js": "2.3.2",
"stacktrace-js": "2.0.0",
"toastr": "2.1.2",
"waypoints": "4.0.1",
"#angular/upgrade": "7.1.1",
"angular2-template-loader": "0.6.2",
"#ngrx/effects": "^6.0.1",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"ngx-page-scroll": "5.0.1",
"ngx-toastr": "9.1.1",
"#aspnet/signalr": "1.1.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.11.0",
"#angular/cli": "~7.1.0",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/angular": "1.6.51",
"#types/core-js": "2.5.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "10.12.11",
"codelyzer": "~4.5.0",
"css-loader": "0.8.0",
"file-loader": "2.0.0",
"imports-loader": "0.8.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"style-loader": "0.8.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6",
"url-loader": "1.1.2",
"webpack-cli": "^3.1.2"
}
}
I had an app which was in Angular JS 1.5, Now we decided to migrate it. As part of the initial analysis, I was doing a simple POC with just 10-15 components which don't have any complex business logic. I did copy a couple of styles from the previous app and that's about it. With just these 15 components when I build the new app with
ng build --prod --vendor-chunk --sourceMap=false --
I realized Angular 7 app has a very high heap size in comparison to our existing Angular JS based application. The major difference comes out from string objects which is very large in Angular 7, I just want to understand is this normal for Angular 7 or am I missing here anything.
Also with --aot option, the heap size is even more. We do have a couple of requirements like open in a new window (which again loads all app in new chrome tab with a different route). I am afraid if the user will open 3 or more tabs memory will reach around a Gb.
Is there any way we can minimize the run time heap memory especially these strings? I am attaching images from Chrome Dev Tools and my angular.json file here.
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ClientApp": {
"root": "ClientApp",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/clientapp/dist",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets",
{
"glob": "**/*",
"input": "Content",
"ignore": [ "*.js", "*.css" ],
"output": "Content/"
},
],
"styles": [
"ClientApp/styles.css",
"Content/themes/base/jquery-ui.min.css",
"Content/dmsglobalstyles.css",
"Content/styles-extension.css",
"Content/responsive-styles.css"
],
"scripts": [
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": true,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ClientApp:build"
},
"configurations": {
"production": {
"browserTarget": "ClientApp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ClientApp:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/styles.css"
],
"scripts": [],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ClientApp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "ClientApp:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ClientApp"
}
Dev Build Bundle
I'm working on a project that uses react-router 3.0.5 and I'm attempting to pass state through browserHistory.push and the route changes but the state doesn't get passed through to props in any location.
I've read the documentation but I could be missing something simple. To my knowledge, this should be sending state without an issue.
async handleSubmit(e) {
e.preventDefault();
const email = this.email.value;
const password = this.password.value;
const passwordconfirm = this.passwordconfirm.value;
const profile = {
firstName: this.firstName.value,
lastName: this.lastName.value,
firstTime: !!this.firstTime.value,
dueDate: date,
couponCode,
membership: { level: 'gold' },
};
Accounts.createUser({ email, password, profile }, (err) => {
if (err) {
return self.setError(err.message);
}
if (isGift) {
claimGift.call({ code: couponCode }, () => {
swal({
title: 'Gift Claimed!',
icon: 'success',
button: 'Continue',
}).then((confirm) => {
if (confirm) return browserHistory.push('/payment', { level: 'gold' });
});
});
} else return browserHistory.push('/payment', { level: 'gold' });
});
}
}
package.json
{
"name": "fakename",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "meteor --settings dev-settings.json"
},
"dependencies": {
"autoprefixer": "^7.1.1",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.1",
"contentful": "^5.1.3",
"marked": "^0.3.6",
"meteor-node-stubs": "~0.2.4",
"moment": "^2.21.0",
"prop-types": "^15.6.0",
"radium": "^0.19.6",
"react": "^16.1.1",
"react-async-script-loader": "^0.3.0",
"react-burger-menu": "^2.1.11",
"react-document-title": "^2.0.3",
"react-dom": "^16.1.1",
"react-feather": "^1.0.7",
"react-flatpickr": "^3.6.3",
"react-router": "3.0.5",
"react-stripe-elements": "^1.2.1",
"react-tooltip": "^3.4.0",
"reactable": "github:vladnicula/reactable",
"sib-api-v3-sdk": "^3.1.6",
"simpl-schema": "^0.3.2",
"stripe": "^5.5.0",
"sweetalert": "^2.0.8",
"sweetalert2": "^7.1.2",
"underscore": "^1.8.3"
},
"devDependencies": {
"#meteorjs/eslint-config-meteor": "^1.0.5",
"babel-eslint": "^7.2.3",
"eslint": "^4.4.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-meteor": "^0.4.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-meteor": "^4.0.1",
"eslint-plugin-react": "^7.2.1"
},
"postcss": {
"plugins": {
"postcss-easy-import": {
"extensions": [
".css",
".scss",
".import.css"
]
},
"autoprefixer": {
"browsers": [
"last 2 versions"
]
}
}
},
"eslintConfig": {
"parser": "babel-eslint",
"parserOptions": {
"allowImportExportEverywhere": true,
"allowAfterThis": true
},
"plugins": [
"meteor"
],
"extends": [
"airbnb",
"plugin:meteor/recommended"
],
"settings": {
"import/resolver": "meteor"
},
"rules": {
"import/extensions": [
"off",
"never"
],
"import/no-extraneous-dependencies": "off",
"import/prefer-default-export": "off",
"import/no-absolute-path": "off",
"react/prefer-stateless-function": "off",
"react/jsx-filename-extension": "off",
"react/forbid-prop-types": "off",
"react/require-default-props": "off",
"no-underscore-dangle": "off",
"jsx-a11y/no-static-element-interactions": "off",
"class-methods-use-this": "off"
}
}
}
React Router allows us to pass state via browserHistory and Link. Example code snippet is given below.
browserHistory.push({pathname: '/navigationPath', state: {message: 'navigated'}})
In your case, you have not added pathname and state in browserHistoy. Your code should look like this
browserHistory.push({pathname: '/payment', state: {level: 'gold'}})
Hope this solution helps you.
Regardless of the version specified in the "bower.json" file, bower (v1.8.0) ignores it and downloads the latest version of the library available.It is not asking to specify the version. Downgrading to the earlier version (v1.3.8) of bower didn't help :(. For example i have specified anuglarjs as 1.5.8 but it downloads 1.6.4.
My bower.json
{
"name": "XXXXXXXXXXXX",
"homepage": "XXXXXXXXXXXX",
"authors": [
"XXXXXXXXXX"
],
"description": "XXXXXXXXXXXX",
"main": "",
"overrides": {
"bootstrap": {
"main": [
"./dist/css/bootstrap.min.css",
"./fonts/glyphicons-halflings-regular.eot",
"./fonts/glyphicons-halflings-regular.svg",
"./fonts/glyphicons-halflings-regular.ttf",
"./fonts/glyphicons-halflings-regular.woff",
"./fonts/glyphicons-halflings-regular.woff2"
]
},
"pouchdb": {
"main": [
"./dist/pouchdb.min.js"
]
},
"cldrjs": {
"ignore": true
},
"cldr-data": {
"ignore": true
},
"globalize": {
"ignore": true
}
},
"license": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "^2.2.3",
"angular": "^1.5.8",
"bootstrap": "^3.3.7",
"angular-route": "^1.4.9",
"toastr": "^2.1.3",
"angular-toastr": "^2.1.1",
"angular-cookies": "^1.5.8",
"angular-translate": "^2.12.0",
"angular-i18n": "^1.5.8",
"angular-translate-loader-static-files": "^2.12.0",
"angular-translate-storage-local": "^2.12.0",
"angular-sanitize": "^1.5.8",
"devextreme": "^16.1.7",
"ngstorage": "^0.3.11",
"angular-base64-upload": "^0.1.19",
"pouchdb": "^6.0.7",
"pouchdb-find": "^0.10.3",
"angular-disable-all": "^0.0.2",
"angular-loading-bar": "^0.9.0"
}
}
Remove the ^ symbol in front of the version number. This means "at least this version". In other words: It won't update your library if the version is equal or higher to the specified version, but if you are installing a new workspace, it will take the newest one.
Here are some more information: What is the bower (and npm) version syntax?