I upgraded my angular version from 10 to 13 so I tried to upgrade rxjs from 6.5.5 to 7.4, rxjs-compat version from 6.6.2 to 6.6.7 that time I was getting the error. Please give me any solution.[![enter image description here][1]][1]
{
"name": "ng-mash-able",
"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": {
"#agm/core": "^1.1.0",
"#angular/animations": "~13.3.7",
"#angular/cdk": "^13.3.7",
"#angular/common": "~13.3.7",
"#angular/compiler": "~13.3.7",
"#angular/core": "~13.3.7",
"#angular/forms": "~13.3.7",
"#angular/localize": "^13.3.7",
"#angular/material": "^13.3.7",
"#angular/material-moment-adapter": "^13.3.7",
"#angular/platform-browser": "~13.3.7",
"#angular/platform-browser-dynamic": "~13.3.7",
"#angular/router": "~13.3.7",
"#auth0/angular-jwt": "^5.0.2",
"#circlon/angular-tree-component": "^11.0.4",
"#fullcalendar/angular": "^5.1.0",
"#fullcalendar/core": "^5.1.0",
"#fullcalendar/daygrid": "^5.1.0",
"#fullcalendar/interaction": "^5.1.0",
"#fullcalendar/resource-daygrid": "^5.1.0",
"#fullcalendar/resource-timegrid": "^5.1.0",
"#fullcalendar/timegrid": "^5.1.0",
"#iplab/ngx-file-upload": "^2.0.7",
"#ng-bootstrap/ng-bootstrap": "^7.0.0",
"#nicky-lenaers/ngx-scroll-to": "^9.0.0",
"#stripe/stripe-js": "^1.27.0",
"#tinymce/tinymce-angular": "^4.2.0",
"angular-datatables": "^13.0.1",
"angular-dual-listbox": "^6.0.0",
"angular2-chartjs": "^0.5.1",
"angular2-moment": "^1.9.0",
"angular2-notifications": "^9.0.0",
"angular2-text-mask": "^9.0.0",
"angular2-tinymce": "^3.3.0",
"angular2-wizard": "^0.4.0",
"bn-ng-idle": "^2.0.1",
"bootstrap": "^4.5.2",
"c3": "^0.7.20",
"d3": "^5.16.0",
"datatables.net": "^1.10.22",
"datatables.net-buttons": "^1.6.3",
"datatables.net-buttons-dt": "^1.6.3",
"datatables.net-colreorder": "^1.5.2",
"datatables.net-dt": "^1.10.21",
"datatables.net-responsive": "^2.2.5",
"datatables.net-select": "^1.3.1",
"dynamsoft-javascript-barcode": "^8.0.0",
"echarts": "^4.8.0",
"famfamfam-flags": "^1.0.0",
"flag-icon-css": "^3.5.0",
"font-awesome": "^4.7.0",
"font-awesome-scss": "^1.0.0",
"fullcalendar": "^5.1.0",
"igniteui-angular": "^11.1.0",
"jquery": "^3.5.1",
"jquery-sparkline": "^2.4.0",
"morris.js": "^0.5.0",
"ng-click-outside": "^7.0.0",
"ng-connection-service": "^1.0.4",
"ng-multiselect-dropdown": "^0.3.8",
"ng-select": "^1.0.2",
"ng2-currency-mask": "^9.0.2",
"ng2-file-upload": "^1.4.0",
"ng2-google-charts": "^6.1.0",
"ng2-knob": "^1.1.0",
"ng2-select2": "^1.0.0-beta.16",
"ng2-toasty": "^4.0.3",
"ng2-ui-switch": "^1.0.2",
"ngx-chips": "^2.1.0",
"ngx-color-picker": "^10.0.1",
"ngx-custom-validators": "^9.1.0",
"ngx-echarts": "^5.1.2",
"ngx-mask": "^11.1.4",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-ui-switch": "^10.0.2",
"peity": "^3.3.0",
"print-js": "^1.6.0",
"raphael": "^2.3.0",
"rxjs": "^7.5.5",
"rxjs-compat": "^6.6.7",
"screenfull": "^3.3.2",
"signature_pad": "^4.0.4",
"simple-line-icons": "^2.5.5",
"sweetalert2": "^11.4.14",
"ti-icons": "^0.1.2",
"tinymce": "^4.8.3",
"tslib": "^2.0.0",
"tui-image-editor": "^3.11.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.5",
"#angular/cli": "~13.3.5",
"#angular/compiler-cli": "~13.3.7",
"#swimlane/ngx-datatable": "^18.0.0",
"#types/datatables.net": "^1.10.19",
"#types/datatables.net-buttons": "^1.4.3",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.5.1",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.19",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.6.4"
}
}
Compiled with problems:X
ERROR in ./node_modules/ng2-toasty/ivy_ngcc/src/toasty.service.js 6:0-39
Module not found: Error: Package path ./Subject is not exported from package
Related
Whenever I try to NPM install styled components I get warnings and my app no longer works, so I delete my node modules and tried to "npm install" to see if that fixed it, I got the following message.Console error message.
This is what my package.json looks like,
{
"name": "WolffMobile",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios --port=8088",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
},
"dependencies": {
"#babel/cli": "^7.19.3",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "^6.2.1",
"#fortawesome/pro-light-svg-icons": "^5.15.4",
"#fortawesome/pro-regular-svg-icons": "^5.15.4",
"#fortawesome/pro-solid-svg-icons": "^5.15.4",
"#fortawesome/react-native-fontawesome": "^0.3.0",
"#graphql-codegen/cli": "^2.13.12",
"#graphql-codegen/typescript": "^2.8.2",
"#graphql-codegen/typescript-graphql-request": "^4.5.8",
"#graphql-codegen/typescript-operations": "^2.5.7",
"#pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
"#react-native-picker/picker": "^2.4.8",
"#react-navigation/bottom-tabs": "^6.4.3",
"#react-navigation/native": "^6.0.16",
"#react-navigation/native-stack": "^6.9.4",
"#rneui/base": "^4.0.0-rc.7",
"#rneui/themed": "^4.0.0-rc.7",
"#types/lodash": "^4.14.189",
"axios": "^0.26.0",
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
"date-fns-tz": "^1.1.6",
"formik": "^2.2.9",
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"graphql-tag": "^2.12.6",
"html-webpack-plugin": "^5.5.0",
"react": "^16.14.0",
"react-content-loader": "^6.2.0",
"react-dom": "^16.14.0",
"react-is": "^16.13.1",
"react-native": "0.70.6",
"react-native-device-info": "^10.3.0",
"react-native-elements": "^3.4.3",
"react-native-modal": "^13.0.1",
"react-native-msal": "^4.0.4",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-svg": "^13.7.0",
"react-native-switch": "^1.5.1",
"react-native-vector-icons": "^9.2.0",
"react-query": "^3.39.2",
"rn-fetch-blob": "^0.12.0",
"styled-components": "^5.3.6",
"webpack": "^5.75.0",
"webpack-bundle-analyzer": "^4.7.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^26.0.23",
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.8",
"#types/react-test-renderer": "^18.0.0",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "0.72.3",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
Is there anyway I can get styled components to work with my react native project?
Tried deleted node modules, pod file, derived data and reinstalling it all with no luck.
I wanted to integrate primereact / primeicons in my Laravel project. But having a bit of a strange error.
The error shows in the console when I run the project:
http://localhost/fonts/vendor/primeicons/primeicons.woff?e61f3495a7ecd3d571a4c9a98797e955 net::ERR_ABORTED 404 (Not Found)
Here is the app.scss file
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
//primereact
#import 'primereact/resources/themes/saga-blue/theme.css';
#import 'primereact/resources/primereact.min.css';
#import 'primeicons/primeicons.css';
these primereact library also included in resources/js/src/Entryfile/Main.js
but still not working
here is the package.json file
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"keywords": [
"reactjs",
"filter",
"sort",
"DataTables",
"jQuery",
"table",
"DataTables"
],
"files": [
"js/*/.js"
],
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-regular-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#fullcalendar/daygrid": "^5.2.0",
"#fullcalendar/interaction": "^5.2.0",
"#fullcalendar/react": "^5.2.0",
"#fullcalendar/timegrid": "^5.2.0",
"antd": "^4.5.2",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"fullcalendar": "^5.2.0",
"jquery": "^3.5.1",
"jquery-slimscroll": "^1.3.8",
"jquery-sticky-kit": "^1.1.3",
"line-awesome": "^1.3.0",
"maskedinput": "^3.3.11",
"moment": "^2.27.0",
"popper.js": "^1.16.1",
"primeicons": "^4.1.0",
"primereact": "^6.0.1",
"prop-types": "^15.7.2",
"quill": "^1.3.7",
"rc-footer": "^0.6.6",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-countdown-circle-timer": "^3.0.9",
"react-csv": "^2.0.3",
"react-datepicker": "^3.4.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.9.0",
"react-input-mask": "^2.0.4",
"react-loading-ui": "^1.2.3",
"react-owl-carousel": "^2.3.1",
"react-popper": "^2.2.3",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-scrollspy-nav": "^1.2.4",
"react-slick": "^0.27.7",
"react-sticky": "^6.0.3",
"react-sticky-box": "^0.9.3",
"react-summernote": "^2.0.2",
"react-toastify": "^7.0.3",
"reactstrap": "^8.5.1",
"recharts": "^1.8.5",
"secure-ls": "^1.2.6",
"slick-carousel": "^1.8.1",
"sticky-kit": "^1.1.3",
"sticky-sidebar": "^3.3.1",
"theia-sticky-sidebar": "^1.7.0",
"validator": "^13.7.0"
},
"devDependencies": {
"#babel/core": "^7.10.5",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"axios": "^0.19",
"babel-loader": "^8.1.0",
"bootstrap": "^4.0.0",
"browser-sync-webpack-plugin": "^2.0.1",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0",
"css-loader": "^4.1.0",
"csv-loader": "^3.0.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^6.0.0",
"papaparse": "^5.2.0",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.49.7",
"sass-loader": "^12.4.0",
"style-loader": "^1.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.0",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"xml-loader": "^1.2.1"
},
"browser": {
"fs": false,
"child_process": false
}
}
We just started up a new project and decided to do it in monorepo together with the existing one. The existing project is in Angular 10 with some parts in React. The new project is purely React.
It seems like everything is getting installed properly and even all the tests are passing. However, when I try to build or even run the application (for the old project) I am getting the following error:
~/PRIZ/dev/priz-fe/platform (PRZ-140) $ yarn run build --delete-output-path
internal/modules/cjs/loader.js:818
throw err;
^
Error: Cannot find module '/Users/shurikag/PRIZ/dev/priz-fe/platform/node_modules/#angular/cli/bin/ng'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
at Function.Module._load (internal/modules/cjs/loader.js:667:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
I feel like it is something dumb that I am missing. Also, the IDE is not complaining about anything.
The folder structure looks like this:
Root package.json:
{
"private": true,
"name": "priz-fe",
"workspaces": [
"platform",
"hub"
],
"packageManager": "yarn#3.1.1"
}
Platform package.json:
{
"name": "platform",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-with-ssl": "node --max-old-space-size=4096 node_modules/#angular/cli/bin/ng serve --ssl --ssl-key docker/ssl/server.key --ssl-cert docker/ssl/server.pem",
"build": "node --max-old-space-size=4096 node_modules/#angular/cli/bin/ng build --configuration=production",
"test": "jest --maxConcurrency=2 --maxWorkers=2",
"update-snapshots": "jest --updateSnapshot",
"test-with-coverage": "ng test --code-coverage",
"eslint": "eslint 'src/app/**/*.{js,jsx,ts,tsx}'",
"eslint:fix": "eslint --fix 'src/app/**/*.{js,jsx,ts,tsx}'",
"lint": "yarn run eslint",
"tsc": "tsc --skipLibCheck --noEmit",
"e2e": "ng e2e",
"storybook": "start-storybook -s public -p 6006",
"build-storybook": "build-storybook",
"fmt": "prettier --write --config ./.prettierrc.yml '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"fmt:check": "prettier --config ./.prettierrc.yml --check '*.{js,yml}' 'src/app/**/*.{js,ts,tsx,scss,component.html}'",
"check": "yarn run fmt:check && yarn run tsc && yarn run lint",
"pre-commit": "yarn run fmt && yarn run check && yarn run test"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest",
"^.+\\.svg$": "jest-svg-transformer"
},
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"setupFiles": [
"jest-canvas-mock"
]
},
"private": true,
"dependencies": {
"#angular-redux/store": "^10.0.0",
"#angular/animations": "^12.2.5",
"#angular/cdk": "^12.2.5",
"#angular/common": "^12.2.5",
"#angular/compiler": "^12.2.5",
"#angular/core": "^12.2.5",
"#angular/flex-layout": "^9.0.0-beta.29",
"#angular/forms": "^12.2.5",
"#angular/material": "^12.2.5",
"#angular/platform-browser": "^12.2.5",
"#angular/platform-browser-dynamic": "^12.2.5",
"#angular/router": "^12.2.5",
"#auth0/angular-jwt": "^4.0.0",
"#date-io/date-fns": "1.3.13",
"#fortawesome/angular-fontawesome": "^0.6.1",
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-brands-svg-icons": "^5.13.0",
"#fortawesome/free-regular-svg-icons": "^5.13.0",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#sentry/browser": "^5.15.5",
"#stripe/react-stripe-js": "^1.5.0",
"#stripe/stripe-js": "^1.19.1",
"#types/hammerjs": "^2.0.39",
"angular-i18next": "^10.1.0",
"auth0-js": "^9.14.0",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"date-fns": "^2.23.0",
"flux-standard-action": "^2.0.3",
"hammerjs": "^2.0.8",
"html-react-parser": "^1.2.6",
"i18next": "^20.2.1",
"i18next-http-backend": "^1.2.1",
"jest-svg-transformer": "^1.0.0",
"keycharm": "^0.4.0",
"lodash": "^4.17.15",
"mixpanel-browser": "^2.28.0",
"ngx-logger": "^4.1.9",
"ngx-mat-select-search": "^3.1.2",
"ngx-quill": "^13.0.1",
"object-hash": "^2.0.3",
"quill": "^1.3.7",
"quill-image-compress": "^1.2.16",
"quill-image-resize-module-react": "^3.0.0",
"react": "^17.0.1",
"react-avatar-editor": "^12.0.0",
"react-color": "^2.19.3",
"react-colorful": "^5.1.4",
"react-currency-format": "^1.0.0",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",
"react-dom": "^17.0.1",
"react-hook-form": "^7.15.2",
"react-i18next": "^11.8.13",
"react-keyed-flatten-children": "^1.3.0",
"react-player": "^2.9.0",
"react-query": "^3.13.6",
"react-quill": "^1.3.5",
"react-redux": "7.2.2",
"react-select": "^4.3.1",
"reduce-reducers": "^1.0.4",
"redux": "4.0.1",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"rxjs": "^6.5.5",
"sass": "^1.39.0",
"svg-react-loader": "^0.4.6",
"tslib": "^2.0.0",
"uuid": "^8.3.1",
"vis-data": "^7.1.2",
"vis-network": "^9.0.4",
"vis-util": "^5.0.2",
"zone.js": "^0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1002.1",
"#angular/cli": "^12.2.5",
"#angular/compiler-cli": "^12.2.5",
"#angular/language-service": "^12.2.5",
"#babel/core": "^7.15.5",
"#storybook/addon-actions": "^6.1.11",
"#storybook/addon-controls": "^6.1.11",
"#storybook/addon-essentials": "^6.1.11",
"#storybook/addon-links": "^6.1.11",
"#storybook/react": "^6.1.11",
"#testing-library/react": "^11.2.6",
"#types/jest": "^26.0.23",
"#types/mixpanel-browser": "^2.23.1",
"#types/node": "^12.11.1",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#typescript-eslint/eslint-plugin": "^4.26.1",
"#typescript-eslint/parser": "^4.26.1",
"babel-loader": "^8.2.2",
"codelyzer": "^5.2.2",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-jest-dom": "^3.9.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^4.6.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.1",
"msw": "^0.35.0",
"msw-storybook-addon": "^1.3.0",
"prettier": "^2.3.1",
"protractor": "~7.0.0",
"react-test-renderer": "^17.0.2",
"redux-mock-store": "^1.5.4",
"ts-jest": "^26.5.6",
"ts-node": "~8.0.1",
"typescript": "4.3.5",
"webpack-bundle-analyzer": "^4.4.0"
},
"msw": {
"workerDirectory": "public"
},
"workspaces": {
"nohoist": [
"**"
]
}
}
I just wanted to try react-native. However I get this error. Metro has encountered an error: Cannot read property 'transformFile' of undefined. I tried it on my physical device and emulator and the error is same. I am getting this in my console "Failed to construct transformer: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)"
Here is my package.json file
{
"name": "XYZ",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "prettier --write src/**/*.{ts,tsx} && eslint src/**/*.{ts,tsx}"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint && yarn test"
}
},
"dependencies": {
"#apollo/react-hooks": "^3.1.5",
"#react-native-community/async-storage": "^1.12.0",
"#react-native-community/masked-view": "^0.1.10",
"#react-native-community/netinfo": "^5.9.6",
"#react-navigation/drawer": "^5.9.0",
"#react-navigation/native": "^5.7.3",
"#react-navigation/stack": "^5.9.0",
"#types/react-native-auth0": "^2.5.0",
"apollo-boost": "^0.4.9",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-upgrade": "^1.0.1",
"date-fns": "^2.16.1",
"metro-config": "^0.59.0",
"react": "^16.13.1",
"react-native": "^0.62.2",
"react-native-auth0": "^2.5.0",
"react-native-dotenv": "^0.2.0",
"react-native-elements": "^2.2.1",
"react-native-gesture-handler": "^1.8.0",
"react-native-google-places-autocomplete": "^1.8.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^1.13.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.10.1",
"react-native-skeleton-placeholder": "^2.0.7",
"react-native-step-indicator": "^1.0.3",
"react-native-svg": "^12.1.0",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^2.15.1",
"react-native-vector-icons": "^7.0.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.20"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/runtime": "^7.11.2",
"#react-native-community/eslint-config": "^1.0.0",
"#types/jest": "^24.0.24",
"#types/react-native": "^0.62.0",
"#types/react-native-dotenv": "^0.2.0",
"#types/react-test-renderer": "^16.9.3",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.27.0",
"babel-jest": "^24.9.0",
"eslint": "^7.7.0",
"eslint-config-airbnb-typescript": "^7.2.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-no-null": "^1.0.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.0",
"husky": "^4.2.5",
"jest": "^26.4.0",
"metro-react-native-babel-preset": "^0.58.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react-native-sass-transformer": "^1.4.0",
"react-native-svg-transformer": "^0.14.3",
"react-test-renderer": "^16.13.1",
"ts-jest": "^26.2.0",
"typescript": "^3.9.7"
}
}
I uninstalled latest version of node and installed LTS(long term support) of node, and it started working
I have react 16.3.2, and today i attempted to upgrade it through yarn upgrade react#latest it has upgraded the yarn.lock's react#^16.8.2 but when I console.log out the react version it still outputs 16.3.2 Did I miss something?
Here's my package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"tj": "jest",
"test": "yarn jest --watch",
"coverage": "yarn jest --coverage || true",
"test:watch": "npm test -- --watch",
"start": "NODE_ENV=dev node server.js",
"startw": "NODE_ENV=dev nodemon --watch webpack.config.js server.js"
},
"jest": {
"setupTestFrameworkScriptFile": "./config/testSetupV1.js",
"setupFiles": [
"raf/polyfill"
],
"moduleNameMapper": {
"\\.(css)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(scss)$": "<rootDir>/node_modules/jest-css-modules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
},
"globals": {
"__TEST__": true
}
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.42",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.0.0-beta.42",
"#babel/preset-flow": "^7.0.0-beta.42",
"#babel/preset-react": "^7.0.0-beta.42",
"#babel/preset-stage-0": "^7.0.0-beta.42",
"#loadable/component": "^5.1.2",
"#welldone-software/why-did-you-render": "^2.3.2",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.0-beta.2",
"babel-plugin-react-hot": "^1.0.4",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-register": "^6.23.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.0.4",
"enzyme-to-json": "^3.2.2",
"eslint": "^4.15.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-flowtype": "^2.41.0",
"eslint-plugin-flowtype-errors": "^3.5.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.4.0",
"eslint-plugin-react": "^7.5.1",
"eslint_d": "^5.3.0",
"expect": "^1.16.0",
"extract-text-webpack-plugin": "^3.0.0",
"flow-bin": "^0.71.0",
"happypack": "^3.0.3",
"jest": "^23.6.0",
"jest-cli": "^23.6.0",
"jest-css-modules": "^1.1.0",
"jsdom": "^8.2.0",
"mocha": "^2.4.5",
"mocha-jsdom": "^1.1.0",
"node-sass": "^4.9.4",
"npm-check-updates": "^2.8.9",
"npm-install-webpack-plugin": "^4.0.4",
"postcss-global-import": "^1.0.1",
"postcss-loader": "^2.1.3",
"prettier-eslint": "^8.7.1",
"prettier-eslint-cli": "^4.7.0",
"raf": "^3.4.0",
"react-addons-test-utils": "^15.1.0",
"react-dev-utils": "^4.1.0",
"react-hot-loader": "^4.5.3",
"react-render-visualizer": "^0.2.2",
"react-testing-library": "5.2.3",
"redux-devtools": "^3.4.2",
"redux-devtools-chart-monitor": "^1.6.1",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-log-monitor": "^1.0.11",
"redux-slider-monitor": "^2.0.0-1",
"sass-loader": "^6.0.7",
"sinon": "^1.17.3",
"style-loader": "^0.13.1",
"webpack": "^4.5.0",
"webpack-assets-manifest": "^3.1.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.4",
"webpack-notifier": "^1.5.0",
"why-did-you-update": "^1.0.6"
},
"dependencies": {
"Faker": "^0.7.2",
"annyang": "^2.6.0",
"aphrodite": "^1.1.0",
"axios": "^0.16.1",
"chrono": "^1.0.5",
"chrono-node": "^1.2.5",
"classnames": "^2.2.5",
"color": "^0.11.3",
"counterpart": "^0.17.4",
"cuid": "^1.3.8",
"damals": "^0.9.4",
"date-fns": "^1.28.0",
"delay": "^1.3.1",
"draft-js": "^0.7.0",
"draft-js-export-html": "^0.3.0",
"fast-memoize": "^2.5.1",
"fecha": "^2.1.0",
"file-loader": "^0.8.5",
"flow-typed": "^2.4.0",
"focus-trap-react": "^3.1.2",
"folktale": "^2.0.1",
"friendly-truncate": "^1.0.3",
"futils": "^3.0.1",
"glamor": "^2.20.40",
"glamorous": "^4.11.0",
"hh-mm-ss": "^1.1.0",
"history": "^2.0.1",
"hms-time": "^0.1.1",
"humanize-plus": "^1.8.2",
"install": "^0.12.2",
"interact.js": "^1.2.8",
"intl": "^1.1.0",
"jason-form": "^0.0.3",
"lodash": "^4.13.1",
"memoizee": "^0.3.10",
"moment": "^2.17.1",
"node-quickbooks": "^2.0.20",
"normalizr": "^2.1.0",
"object-to-formdata": "^1.5.2",
"parse-address": "^0.0.10",
"password-generator": "^2.2.0",
"pluralize": "^3.0.0",
"postcss": "^5.2.17",
"postcss-cssnext": "^2.10.0",
"postcss-import": "^9.1.0",
"prop-types": "^15.5.10",
"pubnub": "^4.13.0",
"query-string": "^4.2.2",
"query-string-parser": "^0.1.4",
"ramda": "^0.25.0",
"ramda-adjunct": "^2.10.0",
"ramda-fantasy": "^0.8.0",
"react": "^16.8.2",
"react-addons-shallow-compare": "^15.1.0",
"react-addons-text-content": "^0.0.4",
"react-calendar-timeline": "^0.11.1",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-dom": "^16.8.2",
"react-dropzone": "^4.2.9",
"react-floating-label": "^1.0.0",
"react-fontawesome": "1.6.1",
"react-functional": "^1.2.0",
"react-grid-layout": "^0.16.0",
"react-hotkeys": "^0.10.0",
"react-idle": "^3.0.0",
"react-is": "^16.8.2",
"react-json-pretty": "^1.7.9",
"react-loadable": "^5.3.1",
"react-loadable-visibility": "^2.5.0",
"react-modal": "^3.1.0",
"react-player": "^0.25.0",
"react-quill": "^1.1.0",
"react-redux": "^4.4.5",
"react-resizable": "^1.7.1",
"react-router": "^3.0.0-beta.1",
"react-router-redux": "^4.0.0",
"react-rte": "^0.15.0",
"react-select": "^2.0.0-beta.7",
"react-spinners": "^0.1.5",
"react-stateful-fn": "^0.1.0",
"react-stateless": "^0.2.1",
"react-sticky": "^6.0.3",
"react-stripe-checkout": "^2.6.3",
"react-test-renderer": "^16.1.0",
"react-tiny-virtual-list": "^2.1.2",
"react-toastify": "^2.0.0",
"react-toolbox": "^2.0.0-beta.8",
"react-visibility-sensor": "^5.0.2",
"recharts": "^1.0.1",
"recompose": "^0.27.0",
"reduce-reducers": "^0.1.2",
"redux": "^3.5.2",
"redux-crud": "^3.2.0",
"redux-form": "^7.4.2",
"redux-mock-store": "^1.5.3",
"redux-saga": "^0.16.0",
"reselect": "^4.0.0",
"seamless-immutable": "^7.0.0",
"store2": "^2.7.0",
"url-loader": "^0.5.7"
}
}
Thanks in advance!
yarn upgrade does not update package.json, only the lock file. Actually, none of the yarn upgrade flags do. There's a long discussion about this in here
You can do the following:
Reinstall React with yarn add react#latest
Install a npm package to check updates, for example, npm-check-updates. Run it to update package.json and then try yarn install.
Or you can install that specific React version yarn upgrade react#16.8.2.
This is the intended behaviour, even though it is very confusing in the docs.