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"
]
}
}
Related
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
i dont know why it is issue occured
An undefined error occurs when using the every MUI tag .
import { Button } from "#mui/material";
// import Button from "#mui/material/Button";
interface Props {}
export default function Test(props: Props) {
return (
<Button>asd</Button>
);
}
return _extends({}, theme.typography.button, { <--- error
Uncaught TypeError: Cannot read properties of undefined (reading 'button')
at ButtonRoot.ownerState.ownerState (Button.js:68:1)
at transformedStyleArg (createStyled.js:191:1)
at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
at serializeStyles (emotion-serialize.browser.esm.js:264:1)
at emotion-styled-base.browser.esm.js:131:1
at emotion-element-cbed451f.browser.esm.js:36:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
below is my package info
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.3",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#hookform/error-message": "^2.0.0",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.2",
"#mui/styles": "^5.9.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.45",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"dayjs": "^1.11.3",
"framer-motion": "^6.3.12",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-calendar": "^3.7.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-material-ui-carousel": "^3.4.2",
"react-query": "^3.39.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"recharts": "^2.1.12",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco 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": {
"#emotion/babel-preset-css-prop": "^11.2.0",
"#types/lodash": "^4.14.182",
"#types/react-calendar": "^3.5.1",
"autoprefixer": "^10.4.7",
"craco-alias": "^3.0.1",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
}
i dont know reason why
In my opinion, several CSS libraries are overlapping to create an issue
so now I'm removing them one by one
but i got still problem
i'm sorry about not good at english
It's a duplicate question on SVG, but maybe my scenario is different, I am not able to understand any solution on the web for my problem which is, getting below error
ERROR in ./src/Utility/assets/customer-delight-logo.svg
Module build failed (from ./node_modules/#svgr/webpack/lib/index.js):
TypeError: Cannot read properties of null (reading 'tagName')
at parse (C:\Customer delight\customerdelight\node_modules\svg-parser\dist\svg-parser.umd.js:279:15)......
my package.json contains
{
"name": "customerdelight",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^4.6.1",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "webpack serve"
},
"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/core": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"cors": "^2.8.5",
"express": "^4.18.1",
"file-loader": "^6.2.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
this is my code
import Logo from '../../Utility/assets/customer-delight-logo.svg';
export default function Logocomp(){
return(
<div className="rad-logo-container">
<img src={Logo} alt="" height="50" width="140"/>
</div>
)
}
Thanks in advance!
Try to update your webpack configuration to handle loading svg files. inside the module.rules array you should add the following:
{
test: /\.(png|svg)$/,
use: ['file-loader']
}
I've developed UI using create-react-app. UI is working fine with the normal npm start command, but when I build the UI with npm run build it's throwing the error `Conversion from 'BigInt' to 'number' is not allowed
I didn't get many related solutions to my problem on google. Can someone help please ?
My Package.json
{
"name": "erp-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.15",
"#popperjs/core": "^2.10.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"bootstrap": "^5.0.1",
"font-awesome": "^4.7.0",
"jsontokens": "^3.1.1",
"react": "^17.0.2",
"react-datepicker": "^4.8.0",
"react-dom": "^17.0.2",
"react-hook-form": "^7.17.0",
"react-paginate": "^7.1.3",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"react-toastify": "^8.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
Error screenshot which is point in browser
I used react as frontend and firebase as backend.
And it succeeded in deploying to vercel.
But it just shows a blank screen.
And when I go to the console, this error code appears.
Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
my repo: https://github.com/kagrin97/fireBase-twitter
package.json
{
"name": "firebase-twitter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.43",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"firebase": "^9.8.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"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": {
"#types/uuid": "^8.3.4",
"autoprefixer": "^10.4.7",
"gh-pages": "^4.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.5"
},
"homepage": "."
}