yarn build not creating build folder - reactjs

I am trying to run yarn build but the command fails. Can anyone help me to solve this issue? The Node version using is v14.1.0 and Yarn version is 1.22.19. The yarn start command works but not the build command.
package.json file
{
"name": "queenofraw",
"version": "0.1.0",
"private": true,
"homepage": "https://ja.materiamx.com",
"main": "",
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-regular-svg-icons": "^5.3.1",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.0.1",
"#material-ui/icons": "^3.0.1",
"#mdi/svg": "^3.0.39",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#react-jvectormap/core": "^1.0.3",
"#rematch/core": "^0.6.0",
"#stripe/stripe-js": "^1.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"antd": "^3.10.4",
"axios": "^0.18.0",
"bootstrap": "^5.2.3",
"chart.js": "^4.1.1",
"classnames": "^2.2.6",
"country-list": "^2.1.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"err": "^2.1.12",
"events": "^2.0.0",
"formsy-react": "^1.1.4",
"image-to-base64": "^2.0.1",
"jquery": "^3.6.1",
"js-cookie": "^2.2.0",
"loadash": "^1.0.0",
"material-ui-table-edit": "^3.0.3",
"moment": "^2.22.0",
"namor": "^1.1.1",
"qs": "^6.9.4",
"query-parse": "^2.0.0",
"rc-queue-anim": "^1.6.7",
"react": "^16.4.2",
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-confirm": "^0.1.17",
"react-cookie": "^3.0.4",
"react-country-flag": "^1.0.1",
"react-dom": "^16.4.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^3.2.2",
"react-images-upload": "^1.2.3",
"react-inline-editing": "^1.0.10",
"react-jvectormap": "0.0.4",
"react-moment": "^0.8.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^5.0.1",
"react-scroll": "^1.7.11",
"react-table": "^6.8.6",
"recharts": "^1.2.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "1.7.0",
"superagent": "^4.0.0-beta.5",
"web-vitals": "^3.0.1",
"yarn": "1.22.19"
},
"scripts": {
"start": "cross-env REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start",
"starts": "PORT=6500 REACT_APP_SERVER=http://localhost:5080 react-scripts start",
"sass:watch": "node-sass -w src/assets/scss/style.scss -o src/assets/css",
"sass:build": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map true",
"dev": "npm-run-all --parallel start sass:watch",
"start:stag": "react-scripts start",
"build": "cross-env REACT_APP_SERVER=http://192.168.2.18:5080 react-scripts build",
"deploy": "aws s3 sync build/ s3://qor-mmx-static --acl public-read",
"stag:build": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts build",
"prod:build": "REACT_APP_SERVER=https://api-dev.materiamx.com/ react-scripts build",
"stag": "yarn run stag:build && sls client deploy --stage staging --aws-profile qor --region us-east-1",
"prod": "yarn run prod:build && sls client deploy --stage production --aws-profile qor --region us-east-1",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^7.0.3",
"flow-bin": "^0.68.0",
"node-sass": "^8.0.0",
"npm-run-all": "^4.1.5",
"react-edit-inline": "^1.0.8",
"react-test-renderer": "^16.2.0",
"serverless-finch": "^2.2.0",
"serverless-single-page-app-plugin": "^1.0.2"
},
"jest": {},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

when i tried npx serve -s build command it worked . May someone find this as a help in the future

Can you please try npm run build.
Regards

Related

Component cannot be used as JSX Component. Its Instance type is not a valid JSX element

Yesterday, in a separate folder, I initialized CRA + installed Material UI. Unfortunately (I think) this made me sprinkle the rest of the projects in separate folders.
I think I've searched all over the internet. I used "resolutions", nothing helps.... Of course, I cloned the repository, removed node modules, installed again and so on.
package.json file:
"name": "app",
"version": "3.1.4",
"private": true,
"typings": "./src/types.d.ts",
"engines": {
"node": "16.16.0"
},
"dependencies": {
"#ant-design/icons": "4.3.0",
"#craco/craco": "6.4.5",
"#dnd-kit/core": "4.0.0",
"#dnd-kit/sortable": "5.0.0",
"#honeybadger-io/js": "^4.7.1",
"#honeybadger-io/react": "^4.7.1",
"#react-pdf/renderer": "2.0.21",
"#stripe/react-stripe-js": "1.1.2",
"#stripe/stripe-js": "1.11.0",
"#types/big.js": "^6.1.3",
"#types/slug": "^5.0.3",
"antd": "4.10.2",
"antd-country-phone-input": "3.4.3",
"apexcharts": "3.23.1",
"axios": "0.21.2",
"big.js": "^6.1.1",
"craco-alias": "2.1.1",
"craco-less": "1.17.0",
"dompurify": "2.2.6",
"dotenv-cra": "3.0.1",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"event-source-polyfill": "1.0.24",
"file-saver": "2.0.5",
"formik": "2.2.9",
"framer-motion": "4.1.3",
"handlebars": "4.7.7",
"history": "4.10.0",
"html2canvas": "^1.3.2",
"jest": "26.6.0",
"js-levenshtein": "^1.1.6",
"jsonwebtoken": "8.5.1",
"linkifyjs": "2.1.9",
"luxon": "1.26.0",
"polished": "4.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"query-string": "6.13.7",
"react": "^17.0.2",
"react-apexcharts": "1.3.7",
"react-cookie": "^4.1.1",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.6",
"react-grid-layout": "^1.3.4",
"react-intl": "5.10.1",
"react-lines-ellipsis": "^0.15.3",
"react-portal": "^4.2.1",
"react-query": "^3.39.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"slug": "^5.2.0",
"smart-timeout": "2.5.2",
"source-map-explorer": "^2.5.3",
"styled-components": "5.2.1",
"talkjs": "0.14.5",
"ts-jest": "26.4.4",
"typescript": "^4.6.4",
"use-react-screenshot": "^1.0.2",
"uuid": "^8.3.2",
"web-vitals": "0.2.4",
"webpack": "4.44.2",
"yup": "^0.32.9"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick"
}
},
"scripts": {
"start": "npm i",
"dev": "craco start",
"build": "craco --max_old_space_size=5120 build",
"eject": "craco eject",
"lint": "eslint --ext .ts \"src/**/*\"",
"format": "prettier --write \"src/**/*\"",
"test": "REACT_APP_ENV=test jest --config ./jest.config.js --env=jest-environment-jsdom",
"test:watch": "REACT_APP_ENV=test jest --config ./jest.config.js --watch --env=jest-environment-jsdom",
"test:ci": "REACT_APP_ENV=test jest --config ./jest.config.js --ci --changedSince=origin/master --forceExit --env=jest-environment-jsdom --coverage",
"version": "conventional-changelog -p emojis -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"release": "release-it",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"defaults",
">0.2%",
"not dead"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-proposal-private-property-in-object": "^7.18.6",
"#testing-library/jest-dom": "5.11.6",
"#testing-library/react": "11.1.2",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "12.2.2",
"#types/axios": "0.14.0",
"#types/dompurify": "2.2.1",
"#types/draft-js": "0.11.5",
"#types/draftjs-to-html": "0.8.0",
"#types/file-saver": "2.0.3",
"#types/handlebars": "4.1.0",
"#types/history": "4.7.6",
"#types/jest": "26.0.15",
"#types/js-levenshtein": "^1.1.1",
"#types/jsonwebtoken": "8.5.0",
"#types/linkifyjs": "2.1.3",
"#types/lodash.isequal": "4.5.5",
"#types/lodash.uniqueid": "4.0.6",
"#types/luxon": "1.26.0",
"#types/node": "12.0.0",
"#types/query-string": "6.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.11",
"#types/react-draft-wysiwyg": "1.13.1",
"#types/react-grid-layout": "^1.3.2",
"#types/react-helmet": "6.1.0",
"#types/react-intl": "3.0.0",
"#types/react-lines-ellipsis": "^0.15.1",
"#types/react-portal": "^4.0.4",
"#types/react-router-dom": "5.1.7",
"#types/react-slick": "^0.23.10",
"#types/styled-components": "5.1.7",
"#types/uuid": "^8.3.1",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "4.7.0",
"babel-loader": "8.1.0",
"conventional-changelog-cli": "2.1.1",
"conventional-changelog-core": "4.2.1",
"conventional-changelog-emojis": "3.1.0",
"core-js": "^3.22.8",
"eslint": "7.32.0",
"eslint-config-airbnb-typescript": "12.0.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.3.0",
"husky": "4.3.5",
"jest-localstorage-mock": "2.4.3",
"jest-styled-components": "^7.0.8",
"jest-transform-stub": "2.0.0",
"prettier": "2.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"pretty-quick": "3.1.0",
"process": "0.11.10",
"react-is": "17.0.1",
"react-test-renderer": "^17.0.2",
"release-it": "14.11.5",
"svg-jest": "1.0.1"
},
"resolutions": {
"react-error-overlay": "6.0.9",
"world_countries_lists": "2.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
}
}

'REACT_APP_SERVER' is not recognized as an internal or external command, operable program or batch file

Thanks for the help in advance. I am trying to install a react app but it is not installing.I am using yarn for this.
The screenshot of the error I am getting after yarn install is the below one
the error I am getting after yarn run start is 'REACT_APP_SERVER' is not recognized as an internal or external command,operable program or batch file.
package.json
{
"name": "queenofraw",
"version": "0.1.0",
"private": true,
"homepage": "https://ja.materiamx.com",
"main": "",
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-regular-svg-icons": "^5.3.1",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.0.1",
"#material-ui/icons": "^3.0.1",
"#mdi/svg": "^3.0.39",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#react-jvectormap/core": "^1.0.3",
"#rematch/core": "^0.6.0",
"#stripe/stripe-js": "^1.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"antd": "^3.10.4",
"axios": "^0.18.0",
"chart.js": "^3.9.1",
"classnames": "^2.2.6",
"country-list": "^2.1.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"err": "^2.1.12",
"events": "^2.0.0",
"formsy-react": "^1.1.4",
"image-to-base64": "^2.0.1",
"jquery": "^3.6.1",
"js-cookie": "^2.2.0",
"loadash": "^1.0.0",
"material-ui-table-edit": "^3.0.3",
"moment": "^2.22.0",
"namor": "^1.1.1",
"qs": "^6.9.4",
"query-parse": "^2.0.0",
"rc-queue-anim": "^1.6.7",
"react": "^16.4.2",
"react-chartjs-2": "^4.3.1",
"react-confirm": "^0.1.17",
"react-cookie": "^3.0.4",
"react-country-flag": "^1.0.1",
"react-dom": "^16.4.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^3.2.2",
"react-images-upload": "^1.2.3",
"react-inline-editing": "^1.0.10",
"react-jvectormap": "0.0.4",
"react-moment": "^0.8.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.5",
"react-scroll": "^1.7.11",
"react-table": "^6.8.6",
"recharts": "^1.2.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "1.7.0",
"superagent": "^4.0.0-beta.5",
"web-vitals": "^3.0.1",
"yarn": "^1.13.0"
},
"scripts": {
"start": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start",
"starts": "PORT=6500 REACT_APP_SERVER=http://localhost:5080 react-scripts start",
"sass:watch": "node-sass -w src/assets/scss/style.scss -o src/assets/css",
"sass:build": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map true",
"dev": "npm-run-all --parallel start sass:watch",
"start:stag": "react-scripts start",
"build": "REACT_APP_SERVER=http://192.168.2.18:5080 react-scripts build",
"deploy": "aws s3 sync build/ s3://qor-mmx-static --acl public-read",
"stag:build": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts build",
"prod:build": "REACT_APP_SERVER=https://api-dev.materiamx.com/ react-scripts build",
"stag": "yarn run stag:build && sls client deploy --stage staging --aws-profile qor --region us-east-1",
"prod": "yarn run prod:build && sls client deploy --stage production --aws-profile qor --region us-east-1",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"flow-bin": "^0.68.0",
"node-sass": "^4.9.3",
"npm-run-all": "^4.1.5",
"react-edit-inline": "^1.0.8",
"react-test-renderer": "^16.2.0",
"serverless-finch": "^2.2.0",
"serverless-single-page-app-plugin": "^1.0.2"
},
"jest": {}
}
Windows doesn't support setting env variables like that
I would recommend using cross-env
Install npm install -D cross-env
Change your commands to cross-env REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start"
You can also try using git bash instead, but I doubt it will work
You should install python2.7 and Visual studio 2019 Environment.
Python 2.7 download link
I wish your success.

export 'useEffect' (imported as 'useEffect') was not found in 'react' (module has no exports)

I am receiving errors of:
It seems to be errors related with redux and react redux:
I also have a warning of:
Attempted import error: 'useMemo' is not exported from 'react' (imported as 'useMemo').
LOG from webpack.FileSystemInfo
<w> Managed item C:\Users\Bernadette Kotelo\Documents\Gahn Eden\frontend\node_modules\react-redux\node_modules\#babel\runtime isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 11 hidden lines
Here's my package.json inside my react redux folder in node_modules:
{
"name": "react-redux",
"version": "8.0.2",
"description": "Official React bindings for Redux",
"keywords": [
"react",
"reactjs",
"redux"
],
"license": "MIT",
"author": "Dan Abramov <dan.abramov#me.com> (https://github.com/gaearon)",
"homepage": "https://github.com/reduxjs/react-redux",
"repository": "github:reduxjs/react-redux",
"bugs": "https://github.com/reduxjs/react-redux/issues",
"main": "./lib/index.js",
"types": "./es/index.d.ts",
"unpkg": "dist/react-redux.js",
"module": "es/index.js",
"files": [
"dist",
"lib",
"src",
"es"
],
"scripts": {
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
"build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
"build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
"build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
"build:types": "tsc",
"build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
"clean": "rimraf lib dist es coverage",
"api-types": "api-extractor run --local",
"format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
"lint": "eslint src --ext ts,tsx,js test/utils test/components test/hooks",
"prepare": "yarn clean && yarn build",
"pretest": "yarn lint",
"test": "jest",
"type-tests": "yarn tsc -p test/typetests/tsconfig.json",
"coverage": "codecov"
},
"peerDependencies": {
"#types/react": "^16.8 || ^17.0 || ^18.0",
"#types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"#types/react": {
"optional": true
},
"#types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"#types/hoist-non-react-statics": "^3.3.1",
"#types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-transform-react-display-name": "^7.12.1",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-typescript": "^7.14.5",
"#microsoft/api-extractor": "^7.18.1",
"#reduxjs/toolkit": "^1.6.1",
"#rollup/plugin-babel": "^5.2.1",
"#rollup/plugin-commonjs": "^15.1.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.3.3",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/jest-native": "^3.4.3",
"#testing-library/react": "13.0.0",
"#testing-library/react-12": "npm:#testing-library/react#^12",
"#testing-library/react-hooks": "^3.4.2",
"#testing-library/react-native": "^7.1.0",
"#types/object-assign": "^4.0.30",
"#types/react": "^18",
"#types/react-dom": "^18",
"#types/react-is": "^17",
"#types/react-native": "^0.67.4",
"#typescript-eslint/eslint-plugin": "^4.28.0",
"#typescript-eslint/parser": "^4.28.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.1",
"codecov": "^3.8.0",
"cross-env": "^7.0.2",
"eslint": "^7.12.0",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"glob": "^7.1.6",
"jest": "^26.6.1",
"prettier": "^2.1.2",
"react": "18.0.0",
"react-17": "npm:react#^17",
"react-dom": "18.0.0",
"react-dom-17": "npm:react-dom#^17",
"react-native": "^0.64.1",
"react-test-renderer": "18.0.0",
"react-test-renderer-17": "npm:react-test-renderer#^17",
"redux": "^4.0.5",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "26.5.6",
"typescript": "^4.3.4"
}
}
And heres is my main app package.json:
{
"name": "frontend",
"proxy": "http://localhost:5000/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.9",
"#chakra-ui/react": "^2.3.2",
"#chakra-ui/system": "^2.2.9",
"#chakra-ui/theme-tools": "^2.0.11",
"#emotion/cache": "^11.10.3",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hypertheme-editor/chakra-ui": "^0.2.0-dev.1",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.5",
"#mui/styled-engine": "^5.10.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"apexcharts": "^3.35.5",
"axios": "^0.27.2",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^5.2.0",
"chart.js": "^3.9.1",
"chroma-js": "^2.4.2",
"framer-motion": "^7.2.1",
"jwt-decode": "^3.1.2",
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primereact": "^8.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.5.0",
"react-calendar": "^3.8.0",
"react-chartjs-2": "^4.3.1",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.2",
"react-github-btn": "^1.4.0",
"react-icons": "^4.4.0",
"react-is": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"react-toastify": "^9.0.8",
"react-transition-group": "^4.4.5",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"stylis": "^4.1.2",
"stylis-plugin-rtl": "^2.0.2",
"swiper": "^8.4.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 have tried uninstalling redux and react-redux and installing them again. It failed.
The errors say all my react hooks cannot be imported in react, inside my node_mudules/react-redux folder. Which is confusing because I have react installed.
Please help me. Thanks
I just ran into this issue. I deleted my node_modules folder rm -rf node_modules/ and ran npm i, and the issue was fixed.

Error: `fsevents` unavailable (this watcher can only be used on Darwin) in CRA v2.1.7 and craco v3.5.0

I am getting the above error while running jest v23 in a monorepo. The package i am running jest on is built on CRA and craco.
Package.json of my CRA
{
"name": "#sprinklr/chat-web-client",
"version": "0.1.0",
"dependencies": {
"#emotion/core": "^10.0.5",
"#emotion/styled": "^10.0.5",
"#sentry/browser": "^5.8.0",
"#sentry/integrations": "^5.8.0",
"#sprinklr/chat-constants": "2.0.0",
"#sprinklr/chat-entities": "2.0.0",
"#sprinklr/chat-utils": "2.0.0",
"#sprinklr/rest-client": "2.0.0",
"azure-storage": "^2.10.3",
"bluebird": "^3.4.0",
"classnames": "^2.2.6",
"core-js": "^3.0.1",
"emotion": "^10.0.2",
"emotion-theming": "^10.0.5",
"formik": "^1.3.2",
"immutability-helper": "^2.8.1",
"jstz": "^2.1.1",
"lodash": "^4.17.4",
"polished": "^2.3.0",
"prop-types": "^15.5.7",
"react": "^16.8.6",
"react-autosize-textarea": "^6.0.0",
"react-dom": "^16.8.6",
"react-frame-component": "^4.0.2",
"react-redux": "7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.7",
"react-transition-group": "^2.5.3",
"react-use": "^14.1.1",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.1",
"reselect": "^4.0.0",
"scriptjs": "^2.5.8",
"shortid": "^2.2.14",
"styled-system": "^3.0.2",
"typesafe-actions": "^2.0.4",
"validate.js": "^0.13.1"
},
"scripts": {
"precommit": "pretty-quick --staged",
"start": "sh internals/build/build-packages.sh && craco start --workspace",
"prebuild": "NODE_ENV=production babel-node internals/build/tools/run prebuild",
"build": "sh internals/build/build.sh",
"analyze": "source-map-explorer build/static/js/main.*",
"eject": "react-scripts eject",
"docz:dev": "docz dev",
"docz:build": "docz build",
"static": "NODE_ENV=production babel-node internals/build/tools/run static/index",
"widget": "NODE_ENV=production babel-node internals/build/tools/run widget/index",
"i18n": "sh internals/i18n/index.sh",
"lint": "eslint src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different",
"test": "craco test --workspace --env=jsdom",
"test-watch": "npm run test -- --watch",
"test-coverage": "npm run test -- --coverage",
"test-update": "npm run test -- --updateSnapshot"
},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "^7.3.1",
"#craco/craco": "^3.5.0",
"#emotion/babel-preset-css-prop": "^10.0.7",
"#sprinklr/chat-types": "2.0.0",
"#testing-library/jest-dom": "4.2.4",
"#testing-library/react": "^9.4.0",
"#types/bluebird": "^3.5.26",
"#types/classnames": "^2.2.7",
"#types/jest": "26.0.0",
"#types/lodash": "^4.14.118",
"#types/node": "^11.13.7",
"#types/react": "^16.8.14",
"#types/react-dom": "^16.8.4",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^7.1.0",
"#types/react-router": "^4.4.2",
"#types/react-textarea-autosize": "^4.3.3",
"#types/react-transition-group": "^2.0.15",
"#types/redux-logger": "^3.0.6",
"#types/scriptjs": "^0.0.2",
"#types/shortid": "^0.0.29",
"#types/styled-system": "^3.0.8",
"aws-sdk": "^2.392.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-plugin-react-intl-auto": "^1.6.0",
"babel-preset-react-app": "^7.0.0",
"cheerio": "^1.0.0-rc.2",
"docz": "^0.12.15",
"eslint-plugin-prettier": "^2.6.2",
"glob": "^7.1.2",
"husky": "^0.14.3",
"node-sass-chokidar": "^1.3.0",
"prettier": "1.13.7",
"pretty-quick": "^1.6.0",
"react-intl": "^2.8.0",
"source-map-explorer": "^1.5.0",
"terser": "3.16.1",
"ts-jest": "26.1.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react-hooks": "^1.1.0",
"typescript": "3.4.5",
"typescript-styled-plugin": "^0.13.0",
"webpack-merge": "^4.1.4"
},
"optionalDependencies": {
"fsevents": "1.2.4"
},
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
I checked my node_modules and it has fsevents installed. Still getting the error. Most common solution which I found was reinstalling node_modules after deleting yarn.lock but this solution isn't working for me. Neither installing watchman worked.
I am using jestConfig of CRA itself
Solved this issue by installing brew and then doing
brew install watchman
on my mac.

why react dev server use https automatically?

I'm trying to debug my react app built by create-react-app on mobile.
So I started app using react-script start,
and made sure all devices have same ip and port. But then the error came out when I tried to access react dev server on smartphone, and all I could see was just blank page.
I never use react-script options like HTTPS=true, but it seems like trying to request using HTTPS. Why?
This is a screenshot from android phone.
and this is my package.json.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.1.0",
"#emotion/styled": "^10.0.17",
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/react-fontawesome": "0.0.20",
"#juggle/resize-observer": "^3.2.0",
"#material-ui/core": "^1.5.1",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.4.1",
"#n8tb1t/use-scroll-position": "^1.0.43",
"#react-hook/media-query": "^1.1.1",
"antd": "^4.2.5",
"auth0-js": "^9.8.1",
"axios": "^0.18.1",
"core-js": "^3.6.5",
"d3-ease": "^1.0.6",
"emotion": "^9.2.12",
"env-cmd": "^10.1.0",
"fast-deep-equal": "^2.0.1",
"formik": "^1.5.8",
"formik-effect": "^1.2.0",
"i18next": "^17.0.14",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",
"immutable": "^4.0.0-rc.12",
"jquery": "^3.5.1",
"js-cookie": "^2.2.0",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.15",
"mapbox-gl": "^1.10.1",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"randomstring": "^1.1.5",
"react": "^16.10.2",
"react-app-polyfill": "^1.0.2",
"react-awesome-modal": "^2.0.5",
"react-circular-progressbar": "^2.0.3",
"react-countup": "^4.2.2",
"react-currency-input": "^1.3.6",
"react-dom": "^16.10.2",
"react-dropdown-tree-select": "^2.1.0",
"react-dropzone": "^4.2.12",
"react-emotion": "^9.2.12",
"react-flags-select": "^1.1.10",
"react-ga": "^2.7.0",
"react-google-login": "^5.0.4",
"react-google-maps": "^9.4.5",
"react-highcharts": "^16.0.2",
"react-i18next": "^10.12.3",
"react-iamport": "0.0.2",
"react-icons": "^3.7.0",
"react-images": "^0.5.17",
"react-map-gl": "^5.2.5",
"react-materialize": "^3.3.1",
"react-moment": "^0.7.7",
"react-move": "^6.4.0",
"react-paginate": "^6.3.0",
"react-password-strength": "^2.4.0",
"react-quill": "^1.3.3",
"react-redux": "^7.1.0-rc.1",
"react-responsive-carousel": "^3.1.50",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^1.2.2",
"react-scripts": "^3.4.1",
"react-share": "^3.0.0",
"react-slick": "^0.23.2",
"react-sortable-hoc": "^1.11.0",
"react-sticky": "^6.0.3",
"react-tooltip": "^3.11.1",
"react-transition-group": "^4.3.0",
"react-treebeard": "^3.2.4",
"react-typed": "^1.1.2",
"react-use-measure": "^2.0.1",
"redux": "^4.0.0",
"redux-actions": "^2.6.5",
"redux-promise": "^0.6.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.7",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.2.0",
"styled-components": "^4.3.2",
"universal-cookie": "^3.1.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:dev": "env-cmd -f ./.env.dev react-scripts build",
"build:prod": "env-cmd -f ./.env.prod 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": {
"http-proxy-middleware": "^0.19.1",
"react-test-renderer": "^16.9.0",
"typescript": "^3.9.6"
}
}

Resources