how to solve vulnerabilities like Regular Expression Denial of Service? - reactjs

When i run my react project i get this following vulnerabilities:
How can i fix this problem?
And can anyone please explain me what this actually is warning me about?
Do i need to update babel-cli?
I have tried to install braces#2.3.0 to see if this warning get away, but nothing changes when i install it.
My package.json file:
{
"name": "Recordshop",
"version": "1.0.0",
"scripts": {
"prestart": "babel-node src-gen/config/startMessage.js",
"start": "npm-run-all --parallel open:src-gen lint:watch",
"open:src-gen": "babel-node src-gen/config/server.dev.js",
"lint": "node_modules/.bin/esw webpack.config.* src-gen src-gen/config",
"lint:watch": "npm run lint -- --watch",
"clean-prod": "npm run remove-prod && mkdirp prod/app",
"remove-prod": "node_modules/.bin/rimraf ./prod",
"build:html": "babel-node src-gen/config/buildHTML.js",
"prebuild": "npm-run-all clean-prod lint build:html",
"build": "babel-node src-gen/config/build.js",
"postbuild": "babel-node src-gen/config/server.prod.js"
},
"private": true,
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.0.5",
"isomorphic-fetch": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fontawesome": "^1.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.7",
"reduce-reducers": "^0.1.2",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"ajv": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.24.1",
"chalk": "^2.1.0",
"cheerio": "^1.0.0-rc.2",
"colors": "^1.1.2",
"compression": "^1.6.2",
"compression-webpack-plugin": "^1.1.11",
"cross-env": "^5.0.0",
"css-loader": "^2.1.1",
"eslint": "^4.19.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-react": "^7.0.1",
"eslint-watch": "^3.1.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.2.0",
"jquery": "^3.1.1",
"mkdirp": "^0.5.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"open": "^6.3.0",
"redux-immutable-state-invariant": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.32.2",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-middleware": "^2.0.5",
"webpack-hot-middleware": "^2.18.0"
}
}
Thank you for all help!

I got same error. And it was the babel-core error. Try update babel-core using yarn add --dev babel-jest babel-core#^7.0.0-bridge.0 #babel/core regenerator-runtime

Related

laravel is unable to get primericons from localhost

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
}
}

UNMET PEER DEPENDENCY - yet I have it installed

What exactly does this mean?
I have React 15.4 installed, yet it complains.
Not sure why the other two appeared.
What does the prepending + and ` mean?
+-- UNMET PEER DEPENDENCY popper.js#^1.16.0
+-- pretty-checkbox#3.0.3
`-- UNMET PEER DEPENDENCY react#15.4.0
Package.js
{
"private": true,
"scripts": {
"transport": "watchify js/app.js -v -t babelify -p livereactload -o public/js/bundle.js",
"ES6-to-ES5": "npx babel es6 --watch --presets babel-preset-env --out-dir js",
"watch": "gulp medicus-watch"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"browserify": "^14.3.0",
"cross-env": "^3.2.3",
"del": "^2.2.2",
"fakerator": "^0.3.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-uglify": "^3.0.0",
"gulp-zip": "^4.0.0",
"laravel-elixir": "^5.0.0",
"laravel-mix": "0.*",
"livereactload": "^3.3.0",
"lodash": "^4.17.4",
"react-proxy": "^1.1.8",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"vue": "^2.1.10",
"watchify": "^3.9.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"create-react-class": "^15.6.0",
"draft-js": "^0.11.4",
"draftjs-to-html": "0.9.1",
"fixed-data-table-2": "^0.7.17",
"jquery": "^3.2.1",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"pretty-checkbox": "^3.0.3",
"prop-types": "^15.5.10",
"ramda": "^0.23.0",
"react": "^15.4.0",
"react-bootstrap": "^0.31.0",
"react-bootstrap-datetimepicker": "0.0.22",
"react-dom": "^15.4.0",
"react-draft-wysiwyg": "^1.14.4",
"react-google-charts": "^1.5.5",
"react-native-html-to-pdf": "^0.8.0",
"react-radio-buttons": "^1.2.2",
"react-redux": "^4.3.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.2.2",
"react-sortable-hoc": "^0.6.8",
"react-widgets": "^3.4.8",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"browserify": {
"transform": [
[
"babelify"
]
]
}
}
Package-lock.json
.
.
.
"react": {
"version": "15.4.0",
"resolved": "https://registry.npmjs.org/react/-/react-15.4.0.tgz",
"integrity": "sha1-c2wcfFQugIgScQbh9FCwEPhtFys=",
"requires": {
"fbjs": "^0.8.4",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.0"
}
},
.
.
.

Metro has encountered an error "Cannot read property "transformFile" of undefined react native

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

After upgrading react, version stuck at 16.3.2

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.

React app deployed on heroku but api call doesn't work

I have a problem with my deployed app on Heroku ! I use my back end with an API made in node ! It works fine locally and but when i deploy the app, i have this message "Invalid Host Header". When i remove the proxy line in my Package.json, it works but automatically i don't have access to my API !
My Api is deployed in another dyno and works fine !
Package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"proxy": "https://myapp.herokuapp.com/",
"dependencies": {
"awesome-typescript-loader": "^3.4.1",
"axios": "^0.17.1",
"babel": "^6.23.0",
"babel-plugin-react-css-modules": "^3.3.2",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.8",
"i": "^0.3.6",
"jquery": "^3.2.1",
"jwt-decode": "^2.2.0",
"prop-types": "^15.6.0",
"radium": "^0.21.0",
"react": "^16.2.0",
"react-big-calendar": "^0.18.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-responsive": "^4.0.4",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-style": "^0.5.5",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.12",
"semantic-ui-less": "^2.2.12",
"semantic-ui-react": "^0.77.1",
"styled-components": "^2.4.0",
"url-loader": "^0.6.2",
"validator": "^9.2.0",
"webpack": "^3.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"webpack": "webpack",
"eject": "react-scripts eject",
"lint": "eslint src",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.8",
"eslint": "^4.13.1",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"img-loader": "^2.0.0",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"nodemon": "^1.13.3",
"prettier": "^1.9.2",
"react-svg-loader": "^2.1.0",
"resolve-url-loader": "^2.2.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.1"
}
}
Thank you for your help !
It's funny, the proxy setting works when running the app on my local env and calling the heroku api
when I deploy it, it doesn't call the Heroku API
You need to change the proxy to match your heroku app name:
"proxy": "https://<insert your app name here>.herokuapp.com/",

Resources