We Keep Coding

craco don't work with react-scripts#^5.0.1

it shows me this error:
yarn start  ✔  27s 
yarn run v1.22.19
$ craco start
Failed to compile.
For the selected environment is no default script chunk format available:
JSONP Array push can be chosen when 'document' or 'importScripts' is available.
CommonJs exports can be chosen when 'require' or node builtins are available.
Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively, specify the 'output.chunkFormat' directly.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
And this is my Package.json
{
"name": "fly-with-zoki",
"version": "1.10.0",
"private": true,
"main": "dist/index.js",
"dependencies": {
"#babel/helper-define-polyfill-provider": "^0.3.2",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fontsource/roboto": "^4.5.8",
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "^4.0.0-alpha.61",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.10.16",
"#mui/lab": "^5.0.0-alpha.114",
"#mui/material": "^5.10.17",
"#mui/styled-engine-sc": "^5.10.16",
"#reduxjs/toolkit": "^1.8.0",
"#stripe/react-stripe-js": "^1.8.0-0",
"#stripe/stripe-js": "^1.29.0",
"#types/dotenv": "^8.2.0",
"amadeus": "^7.1.0",
"axios": "^0.27.1",
"bootstrap": "^4.6.1",
"chartist": "0.10.1",
"classnames": "2.3.1",
"date-fns": "^2.28.0",
"dom-lib": "^3.1.5",
"font-awesome": "^4.7.0",
"history": "5.0.0",
"jquery": "^3.6.0",
"json-schema-to-typescript": "^11.0.2",
"lib": "^4.3.3",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.3",
"node": "^16.13.0",
"notistack": "^1.0.10",
"perfect-scrollbar": "1.5.1",
"popper.js": "^1.16.1",
"prop-types": "15.7.2",
"react": "^18.2.0",
"react-chartist": "0.14.4",
"react-dom": "17.0.2",
"react-image-gallery": "^1.2.8",
"react-moment": "^1.1.2",
"react-redux": "^7.2.8",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "5.2.0",
"react-scripts": "^5.0.1",
"react-select": "^5.3.2",
"react-swipeable-views": "^0.14.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.6"
},
"scripts": {
"lint": "eslint src",
"dev": "cross-env NODE_OPTIONS= next dev",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"keywords": [],
"optionalDependencies": {
"#babel/core": "7.14.0",
"typescript": "4.2.4"
},
"devDependencies": {
"#babel/eslint-parser": "^7.19.1",
"#babel/preset-react": "^7.18.6",
"#craco/craco": "^7.0.0",
"autoprefixer": "^10.4.13",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.9",
"postcss": "^8.4.21",
"react-error-overlay": "6.0.9",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
}
I have tried to upgrade my react-scripts by using
npm ugdate react-scripts
npm upgrade react-scripts
yarn update react-scripts
yarn upgrade react-scripts
But no changes were applied :(

How to build a react project without minify the node modules

I've been working on a project, but when I try to build it I got the following error:
Failed to minify the code from this file:
./node_modules/emailjs-com/es/utils/validateParams.js:1:7
I am using craco to build the project. I have researched about this error, but I was not able to make any of the solutions I found work on my case.
My package.json:
{
"name": "my-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#craco/craco": "^5.9.0",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#heroicons/react": "^1.0.1",
"dotenv": "^10.0.0",
"emailjs": "^3.5.0",
"emailjs-com": "^3.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-scripts": "^1.1.5",
"save-dev": "^0.0.1-security"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"gh-pages": "^3.2.3",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
}
}
I would like to know if there is a way to build it without executing any minification, or if it is really required, how to solve the minification that I am having when trying to minify my code.

I always get a Invalid hook call and I don´t know why

My package.json:
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"dependencies": {
"#apollo/client": "^3.3.21",
"#craco/craco": "^6.2.0",
"#widgetbot/react-embed": "^1.4.0",
"#windmill/react-ui": "^0.6.0",
"chart.js": "2.9.3",
"fastest-levenshtein": "^1.0.12",
"framer-motion": "^3.10.6",
"moment": "^2.29.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^17.0.2",
"react-focus-lock": "^2.4.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-transition-group": "^4.4.1",
"socket.io-client": "^3.1.1"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
},
}
I think it is no mismatching of versions or more than one copy of React.
I experimented 2 day around and I still haven´t got a solution.

React table Gives empty table in build

This is a very strange issue but I was using react-table 7.0.0.rc16 and I recently upgraded to react-table 7.0.1 the problem is my data works in dev mode but as soon I create a react build it wont render anything I would like to know why and I am attaching my package.json for the same.
sandbox
Demo
Package.json
{
"name": "test",
"homepage": "http://www.test.com",
"version": "0.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.11",
"#material-ui/core": "^4.4.2",
"#material-ui/icons": "^4.4.3",
"#material-ui/lab": "^4.0.0-alpha.39",
"#material-ui/pickers": "^3.2.6",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"date-fns": "^2.9.0",
"echarts": "4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"formik": "^1.5.8",
"formik-material-ui": "^0.0.22",
"google-map-react": "^1.1.5",
"i18next": "^17.0.18",
"i18next-browser-languagedetector": "^4.0.0",
"i18next-xhr-backend": "^3.2.0",
"immutable": "^4.0.0-rc.12",
"node-sass": "^4.12.0",
"prop-types": "^15.6.1",
"react": "^16.9.0",
"react-csv": "^2.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-d3-tree": "^1.16.1",
"react-dom": "^16.9.0",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.13.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^2.0.3",
"react-table": "7.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.1.3",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"watch": "react-scripts start --watch",
"build": "CI=false react-scripts --expose-gc --max-old-space-size=4096 build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"eslint-config-prettier": "^6.4.0",
"eslint-plugin-prettier": "^3.1.1",
"prettier": "^1.18.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Package-lock.json is also attached as a file
image of table
I am using node v10.23.1 and npm 6.14.10.

This is a problem with react-table v7.0.1, upgrading to v7.0.2 fixes the problem.
It's a minification bug. Here is the exact commit that fixed the problem.
From the Changelog :
7.0.2
Fixed an issue where the internal flexRenderer would not work correctly in production due to the strangest friggin' minification bug
I've ever encountered. 🤷‍♂️

React Webpack Utils Error

When running npm start I get this error
Cannot find module 'react-dev-utils/WebpackDevServerUtils'
I even tried deleting and reinstalling. Any help? Here's package.json
{
"name": "tic-tac-toe-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"webpack": "^4.15.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-dev-utils": "^5.0.1",
"react-scripts": "^1.1.4",
"webpack": "^1.15.0",
"webpack-cli": "^3.0.8",
"webpack-command": "^0.4.1",
"webpack-dev-server": "^3.1.4"
}
}

Delete the "node_modules' folder within the project
Then run npm install again