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/",
Related
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
}
}
When I start the run debug of my app in Visual Studio Code(F5) then the mouse is not working. I can not anymore left click with the mouse but I can move the mouse pointer but no click is registered. I can press the keyboard "tab" and press ENTER but that's it. I can't see where to start debug this problem so I add my package.json maybe it can give some clue
In Windows I use the Chrome Browser and other apps and the mouse is behaving normally there.
What I did prior to this strange happening was that I tried the "react-scripts": "5xx". And then I Went back to "react-scripts": "4.0.3"
Here's my package.json
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"#types/recompose": "^0.30.9",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"notistack": "^3.0.0-alpha.1",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-virtualized": "^9.22.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-visibility-sensor": "^5.1.1",
"react-window": "^1.8.6",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^4.6.2",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "ยง",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "4.0.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
I've had this issue with react-script myself, and it seems to be a well-known issue.
As suggested in this github issue, you can do the following:
Change the react-script version to 4.0.3 in package.json
Add "resolutions": { "react-error-overlay": "6.0.11" } (latest version of react-error-overlay) to your package.json
npm install react-error-overlay
Delete your node_modules and package-lock.json
Run npm i
Hope that fixes it.
I can't do "npm install" on this project anymore and I don't know why because I'm a novice.
I see in the picture top that something about "node-sass" maybe is the problem. Should I update node-sass? I must ask so I don't cause more trouble
package.json
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"normalize-wheel": "^1.0.1",
"notistack": "^1.0.10",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.8.4",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.1",
"react-resize-detector": "^5.0.7",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
node-sass 4.x doesn't support Node 16 https://github.com/sass/node-sass#node-version-support-policy (I believe this might also be the case for CRA)
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
I have one small react app which is based on https://redq.gitbooks.io/isomorphic/content/ theme. The issue is when i built the package it generates main.js with 3MB of size with other smaller chunks.
Below is package.json. Please help me in this regard. Thanks in advance. Let me know if anyone needs any other thing.
{
"name": "isomorphic",
"version": "2.9.0",
"private": true,
"dependencies": {
"antd": "^3.10.1",
"axios": "^0.18.0",
"clone": "^2.1.1",
"fingerprintjs": "^0.5.3",
"history": "^4.6.3",
"jsonwebtoken": "^8.3.0",
"nprogress": "^0.2.0",
"qs": "^6.5.2",
"react": "^16.2.0",
"react-async-script-loader": "^0.3.0",
"react-confirm-alert": "^2.0.6",
"react-datepicker": "^1.7.0",
"react-dom": "^16.2.0",
"react-grid-system": "^4.3.1",
"react-intl": "^2.7.1",
"react-placeholder": "^2.0.0",
"react-recaptcha": "^2.3.10",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-router-dom": "^4.1.0",
"react-router-redux": "^5.0.0-alpha.8",
"react-scripts": "1.0.17",
"react-select": "^2.1.0",
"react-smooth-scrollbar": "^8.0.6",
"react-throttle": "^0.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.7.2",
"redux-saga": "^0.16.2",
"redux-thunk": "^2.2.0",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3"
},
"devDependencies": {
"react-app-rewired": "^1.4.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
}