I just created my react-app and everything is working on my localhost also connecting to backend app through API which i configured, Now I just deployed my react app to nginx server after running yarn run build and i uploaded the build folder to my server root directory. The home page was serve and other page which needn't to connect to the server was serve as well but when I try to login I got an error and from the error I realised my app was sending request to http://localhost:3000/v1/auth/login instead of http://api.mysite.com/v1/auth/login How do I make this changes before building my react app. Below is my package.json file
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"proxy": "https://api.mysite.com",
"dependencies": {
"#date-io/dayjs": "^2.16.0",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.10.2",
"#mui/material": "^5.10.17",
"#mui/x-date-pickers-pro": "^5.0.12",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"jquery": "^3.6.0",
"mdb-react-ui-kit": "^4.1.0",
"moment": "^2.29.4",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-submenu": "^2.0.0",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-icons": "^4.4.0",
"react-image-gallery": "^1.2.9",
"react-loading-skeleton": "^3.1.0",
"react-phone-number-input": "^3.2.9",
"react-pro-sidebar": "^1.0.0-alpha.7",
"react-redux": "^8.0.2",
"react-responsive": "^9.0.0-beta.10",
"react-responsive-carousel": "^3.2.23",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-select": "^5.6.1",
"react-simple-star-rating": "^4.0.5",
"react-slick": "^0.29.0",
"redux": "^4.2.0",
"semantic-ui-react": "^2.1.3",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.5",
"sweetalert": "^2.1.2",
"swiper": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#expo/webpack-config": "^0.17.2",
"react-error-overlay": "6.0.9"
},
"resolutions": {
"styled-components": "^5",
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
Proxies only work for the dev server and don't work in production. You'll have to create an env file and use that instead. Here's how you'd do it:
// .env
REACT_APP_APP_HOST='https://api.mysite.com'
process.env.REACT_APP_APP_HOST // use this to access your api
Related
it's a weird issue I've got after I deployed my PWA application to prod (EKS). Some users and one of my brothers reported that they caught an issue which caused a white screen of death after refreshing and they had to refresh the page to use the application again. On my device, everything works just fine. I asked my brother about the error on the network tab in chrome's dev tools and these error lines showed up.
Uncaught SyntaxError: Unexpected token "<" 2.9345ebBe.chunk.js:1
Uncaught SyntaxError: Unexpected token "<" main.fa04b6.chunk.js:1
Any idea? I asked my brother about his chrome version, his device, his setup, the steps to reproduce but no luck. I read some topics on stackoverflow too. They said that maybe it's all about cache problem. The system tries to read a js file but it actually an HTML file the "<" token is the "<" from <!doctype html>. I asked my brother to clear all the caches but he still got the problem. I have no idea what's going on.
Package.json
{
"name": "my.pwa",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#mui/material": "^5.6.4",
"#mui/styled-engine-sc": "^5.6.1",
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.19.2",
"bootstrap": "^5.1.3",
"date-fns": "^2.28.0",
"dexie": "^3.0.2",
"env-cmd": "^10.1.0",
"firebase": "^7.24.0",
"framer-motion": "^6.5.0",
"jquery": "^3.6.0",
"lodash": "^4.17.15",
"moment": "^2.29.3",
"react": "^17.0.2",
"react-bootstrap": "^2.2.1",
"react-dom": "^17.0.2",
"react-easy-crop": "^4.1.4",
"react-infinite-scroll-component": "^6.1.0",
"react-loading-skeleton": "^3.1.0",
"react-redux": "^7.2.8",
"react-router-dom": "^5.1.2",
"react-scripts": "^2.1.3",
"react-switch": "^7.0.0",
"react-textarea-autosize": "^8.3.4",
"redux": "^4.1.2",
"redux-persist": "^6.0.0",
"swiper": "^8.2.4",
"uuid": "^7.0.3",
"web-vitals": "^0.2.4",
"wowjs": "^1.1.3"
},
"proxy": "http://localhost:3006",
"secure": false,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:development": "env-cmd -f .env.development react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {}
}
My project was working correctly 100% until today when I started my development environment and it gave me a bunch of errors. The errors indicated my adding fallbacks for modules like HTTP and crypto. I did that and it gave me the error of Module fs not found.
I researched on the internet and downgraded my react-scripts from v5 to v4.0.3 and now when I start the project it gives me the following error
./node_modules/react-toastify/dist/react-toastify.esm.mjs
Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'xxx:\DumpStack.log.tmp'
My package.json
{
"name": "ahad",
"version": "0.1.0",
"private": true,
"dependencies": {
"#mui/icons-material": "^5.8.4",
"#stripe/stripe-js": "^1.32.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/node": "^18.0.0",
"apexcharts": "^3.35.3",
"axios": "^0.27.2",
"browserify-zlib": "^0.2.0",
"crypto-browserify": "^3.12.0",
"datetime-difference": "^1.0.2",
"express-validator": "^6.14.2",
"formik": "^2.2.9",
"ip-info-finder": "^1.2.3",
"mdb-react-ui-kit": "^4.0.0",
"mdbreact": "^5.2.0",
"path-browserify": "^1.0.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-gif-loader": "^0.6.0",
"react-icons": "^4.4.0",
"react-loading": "^2.0.3",
"react-pro-sidebar": "^0.7.1",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-select": "^5.3.2",
"react-stripe-checkout": "^2.6.3",
"react-toastify": "^9.0.5",
"socket.io-client": "^4.5.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"stripe": "^9.9.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I've created a react project with the instructions from it's documentation, which automatically has added the App.js file to the project. My issue is that I want to use App.tsx instead of App.js. For some reason, I am not able to run App.tsx file. How can I fix this, please?
I have read this question asked here, but I couldn't use it as it didn't make any sense to me since this is my first project with react.
This is my folder structure.
It can be seen on this image, I get an error on the browser when I comment it out the App.js file.
This is the index.js file, which is not changed.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
This is the package.json file
{
"name": "dualnback",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.0",
"#types/lodash": "^4.14.149",
"#types/material-ui": "^0.21.7",
"atob": "^2.1.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.4.1",
"concurrently": "^5.0.0",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-session": "^1.17.0",
"express-ws": "^4.0.0",
"hammerjs": "^2.0.8",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"material-ui": "^0.20.2",
"mongoose": "^5.7.8",
"morgan": "^1.9.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"reactstrap": "^8.2.0",
"rxjs": "~6.4.0",
"rxjs-compat": "^6.5.3",
"tslib": "^1.10.0",
"typescript": "^3.7.3",
"websocket": "^1.0.30",
"zone.js": "~0.9.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.3",
"#types/reactstrap": "^8.2.0",
"react-router-dom#next":"*"
}
}
You may just need to install related type libs.
npm install --save #types/react #types/react-dom
Try it out.
I'm using React scripts v3. I have this issue whenever I do an action of in the page ( mouse event, forms...) the application keeps downloading chunk.js
This my package.json
{
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"cors": "^2.8.5",
"lodash.flatten": "^4.4.0",
"lodash.get": "^4.4.2",
"lodash.intersection": "^4.4.0",
"mockdate": "^2.0.2",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-scripts": "^3.0.1",
"recompose": "^0.30.0",
"url-search-params-polyfill": "^6.0.0",
"uuid": "^3.3.2"
},
"scripts": {
"mocks": "cd mocks && npm start",
"start-dotnet": "react-scripts start",
"start": "concurrently \"npm run mocks\" \"react-scripts start\"",
"build": "react-scripts build",
"test": "set NODE_ICU_DATA=node_modules/full-icu&& react-scripts test --env=jsdom",
"test:staged": "npm run test -- --coverage --findRelatedTests --watchAll=false",
"test-coverage": "npm run test -- --coverage --watchAll=false"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*src/**/*.js": [
"prettier --write",
"npm run test:coverage",
"git add"
]
},
"commitlint": {
"extends": [
"#commitlint/config-conventional"
]
},
"eslintConfig": {
"extends": "react-app"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"browserslist": [
">0.2%",
"ie 11",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#commitlint/cli": "^8.0.0",
"#commitlint/config-conventional": "^8.0.0",
"concurrently": "^4.1.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"enzyme-to-json": "^3.3.5",
"eslint-plugin-react-hooks": "^1.6.0",
"full-icu": "^1.3.0",
"husky": "^2.4.1",
"jest": "^24.7.1",
"jest-cucumber": "^2.0.11",
"lint-staged": "^8.2.1",
"node-sass": "^4.11.0",
"prettier": "^1.18.2"
}
}
Does anyone have an idea about this issue?
I ran into the same issue, where it kept on requesting for chunk.
It happened because there was a reference issue inside my JS chunk that I was lazy loading.
So I was lazy loading page data, and inside the JS for that, I was doing an import to a file that did not exists. And that lead to this issue.
Fixing that fixed it for me.
I ran into this problem today. I had incorrectly set the onChange action to a string instead of a function, so changing it to a function worked for me.
I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work.
Here is the online example from Material UI.
https://codesandbox.io/s/52p74362pl
The error that i am getting is:
index.js:1446 ../node_modules/#date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\#date-io\date-fns\build'`
here are my package.json files
{
"name": "IFS.CDE.Web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.7.1",
"#material-ui/icons": "^3.0.1",
"ajv": "^6.5.2",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"connected-react-router": "6.1.0",
"date-fns": "^1.30.1",
"downshift": "^2.0.10",
"extract-svg-path": "^2.1.0",
"file-saver": "^1.3.8",
"install": "^0.12.1",
"lodash": "^4.17.10",
"material-ui-datetimepicker": "^1.0.7",
"material-ui-image": "^3.0.3",
"material-ui-pickers": "^2.1.1",
"moment": "^2.23.0",
"npm": "^6.5.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.6.2",
"rc-progress": "^2.2.6",
"react": "^16.6.3",
"react-autosuggest": "^9.3.4",
"react-bingmaps": "^3.6.1",
"react-color": "^2.14.1",
"react-dnd": "^7.0.2",
"react-dom": "^16.6.3",
"react-dropzone": "^4.3.0",
"react-file-viewer": "^0.5.0",
"react-iframe": "^1.2.0",
"react-loadable": "^5.5.0",
"react-popper": "^0.10.1",
"react-redux": "^6.0.0",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.2",
"react-select": "^2.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"rimraf": "^2.6.2",
"typeface-roboto": "^0.0.54",
"uuid": "^3.3.2",
"video-react": "^0.13.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"set-env": "set NODE_ENV=production"
},
"devDependencies": {},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I have installed date-fns but i still get the error.
https://www.npmjs.com/package/date-fns.
I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.
Thanks for the help.
install this(see here):
npm i --save date-fns#next #date-io/date-fns
Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.