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. 🤷♂️
Related
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 :(
I have tried looking around to see what might be causing my app to not completely build on DigitalOcean. I have tried a few solutions that I have found here to no avail. I have no problem launching my react app locally.
Here is my package.json
{
"name": "first_tailwind_css",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.1",
"#hookform/resolvers": "^2.7.1",
"#tailwindcss/forms": "^0.3.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#tippyjs/react": "^4.2.5",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"firebase": "^8.8.1",
"react": "^17.0.2",
"react-cookies": "^0.1.1",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-hook-form": "^7.12.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"semantic-ui-react": "^2.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"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": {
"#types/react-cookies": "^0.1.0",
"#types/react-router-dom": "^5.1.8",
"#typescript-eslint/eslint-plugin": "^4.29.0",
"#typescript-eslint/parser": "^4.29.0",
"autoprefixer": "^9.8.6",
"eslint": "^7.32.0",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"postcss": "^7.0.36",
"prettier": "^2.3.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
}
}
Where DigitalOcean stops building:
[2021-10-22 16:38:33] ℹ 「wds」: webpack output is served from
[2021-10-22 16:38:33] ℹ 「wds」: Content not from webpack is served from /workspace/public
[2021-10-22 16:38:33] ℹ 「wds」: 404s will fallback to /
[2021-10-22 16:38:33] Starting the development server...
[2021-10-22 16:38:33]
My build commands on DigitalOcean:
npm run build
npm start
I have tried running the install command before build, but that did not work either.
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've just taken over a project from a disgruntled developer who thinks he's the best thing since sliced bread.
The error
He swears his code was running on the last commit... although, I get problems in an async/await. I vaguely remember having similar problems when not supporting the right version of babel, but that was years back. The project is created with create-react-app.
Here's the package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"jest": {
"transform": {}
},
"dependencies": {
"#makerdao/multicall": "^0.11.0",
"#material-ui/core": "^4.11.0",
"#material-ui/data-grid": "^4.0.0-alpha.8",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bignumber.js": "^9.0.1",
"bip32": "^2.0.6",
"bip38": "^3.1.1",
"bip39": "^3.0.2",
"bitcoinjs-lib": "^5.2.0",
"bs58check": "^2.1.2",
"ci": "^1.0.0",
"fake-indexeddb": "^3.1.2",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.0.0",
"jest-fetch-mock": "^3.0.3",
"json-bigint": "^1.0.0",
"json-bignumber": "^1.0.2",
"keccak256": "^1.0.2",
"node-fetch": "^2.6.1",
"puppeteer": "^5.5.0",
"qrcode-svg": "^1.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rimraf": "^2.6.3",
"secp256k1": "^4.0.2",
"typescript": "^4.0.5",
"web3": "^1.3.0",
"xmlhttprequest": "^1.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --verbose",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:react/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"ansi-regex": "^4.1.0",
"eslint-plugin-react": "^7.21.5",
"gh-pages": "^3.1.0",
"react-scripts": "^3.4.4"
}
}
You are passing a promise to the function, and promise is not a function. You should do instead: await f and not execute it by await f() since the promise just needs to be called and not to be executed.
I use reactjs for frontend and expressjs for backend API.
I tried this
{
"name": "carweb",
"version": "0.1.0",
"private": true,
"dependencies": {
"async": "^2.5.0",
"body-parser": "^1.17.2",
"cors": "^2.8.4",
"crypto-js": "^3.1.9-1",
"dotenv": "^4.0.0",
"expressjs": "^1.0.1",
"jquery": "^3.2.1",
"jwt-simple": "^0.5.1",
"nodemon": "^1.11.0",
"react": "^15.6.1",
"react-countup": "^2.1.1",
"react-document-title": "^2.0.3",
"react-dom": "^15.6.1",
"react-materialize": "^1.0.6",
"react-rethinkdb": "^0.6.0",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"rethinkdb": "^2.3.3",
"spicy-datatable": "^0.4.0",
"web-storage": "^1.0.0"
},
"scripts": {
"start": "react-scripts start",
"backend": "nodemon ./src/js/backend/app.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
This work perfectly. So I want to combine both commands together.
I tried:
react-scripts start && nodemon ./src/js/backend/app.js
This is not working.
Try this npm package https://www.npmjs.com/package/concurrently
It'll allow you to do what you want. The question is "is this approach correct"