Change old React app to work with React Dev Tools - reactjs

I am new to React apps so please excuse me if my question has an easy answer. I have spent the last few days with Google and have not found a solution for my question.
At my new position, I have been asked to modify a current React app. The short of it is that this app was built before my time and is old. The app does not permit for a dev build. And since it does not allow for a dev build our development team can not see the component layout, props, or state along with any other goodies provided by the React Dev Tools.
My question is how do I make my app work properly with the React Dev Tools?
Other details that may help:
Files are located in ABC/app/src/common
Normally here at my employer, this would translate into a URL of:
www.ABC.com/app/. Yet for some reason, this is not how things are set up.
Instead the app is served from a URL subdomain:
app.XYZ.com
Also, note that the URL www.XYZ.com is not a React app - (not sure this is relevant)
Basically the build scripts create the bundle and the .min files are moved from the ABC/app/src/common folder to app.XYZ/.
package.JSON:
"name": "ABC-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.0-14",
"#fortawesome/free-solid-svg-icons": "^5.1.0-11",
"#fortawesome/react-fontawesome": "0.1.0-11",
"ajv": "^6.0.0",
"alertifyjs": "^1.11.2",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"connected-react-router": "^4.4.1",
"dateformat": "^3.0.3",
"deep-freeze": "0.0.1",
"fast-deep-equal": "^2.0.1",
"fuse.js": "^3.4.6",
"history": "^4.7.2",
"i": "^0.3.6",
"moment": "^2.22.2",
"node-sass-chokidar": "^1.3.3",
"npm": "^6.2.0",
"prop-types": "^15.6.2",
"react": "^16.5.0",
"react-collapse": "^4.0.3",
"react-dom": "^16.4.1",
"react-html-parser": "^2.0.2",
"react-loading": "^2.0.3",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.4",
"react-select": "^2.0.0",
"react-table-container": "^2.0.1",
"react-topbar-progress-indicator": "^2.0.0",
"react-transition-group": "^2.4.0",
"react-virtualized": "^9.20.1",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "yarn run build-css && react-scripts build && yarn run move-js && yarn run move-css",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"commit": "react-scripts build && yarn run move-js && yarn run move-css",
"move-js": "cp ./build/static/js/main.*.js ../../app.XYZ.com/assets/js/main.js",
"move-css": "cp ./build/static/css/main.*.css ../../app.XYZ.com/assets/css/main.css"
},
"proxy": "http://dev-app.XYZ.com/",
"devDependencies": {
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"redux-devtools": "^3.4.1",
"redux-logger": "^3.0.6",
"why-did-you-update": "^0.1.1"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">0.25%",
"not op_mini all",
"ie 11"
]
}
}

Try running react-scripts start in the root project folder.
The application should open a new browser window at http://localhost:3000 - then if you have the React DevTools Chrome extension installed you should be able to access the React DevTools tab

After some investigation and thanks to #JonathanIrwin and #DrewReese, I noticed that with in package.json file, inside the scripts sub-object there is scripts.start. This overwrites the default start command. Thus when the command npm start or yarn run start is executed node is running scripts.start which reads:
"start": "yarn run build-css && react-scripts build && yarn run move-js && yarn run move-css",
To fix this, adding a new script reading:
"dev-start": "react-scripts start",
does the job. To execute this script anyone can run the command yarn run dev-start or npm dev-start from the terminal.

Related

Heroku: Why would I be getting a H10 error after React app deployment?

This week my computer hard drive died, I restored my app from my repository to the new hard drive, installed all the dependencies but now my app won't work under deployment. It runs fine locally but in production it crashes. I've read many articles and threads here on SO, everything I've tried doesn't solve my problem. I've pushed the last working commit I had and that doesn't work either. I've created a support ticket on Heroku, no help from them so far. It's been two days of trying and frustration, so now I come here for some help.
The error:
2021-01-29T12:30:59.905820+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: Project is running at http://172.17.191.58/
2021-01-29T12:30:59.906395+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: webpack output is served from
2021-01-29T12:30:59.906538+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: Content not from webpack is served from /app/public
2021-01-29T12:30:59.906689+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: 404s will fallback to /
2021-01-29T12:30:59.907032+00:00 app[web.1]: Starting the development server...
2021-01-29T12:30:59.907032+00:00 app[web.1]:
2021-01-29T12:31:00.092835+00:00 heroku[web.1]: Process exited with status 0
2021-01-29T12:31:00.133082+00:00 heroku[web.1]: State changed from starting to crashed
2021-01-29T12:31:02.023244+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=www.myapp.com request_id=7bcd9236-6d02-4c9b-bf0c-7d18dce36830 fwd="187.65.182.161" dyno= connect= service= status=503 bytes= protocol=https
package.json
{
"name": "client",
"homepage": "/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ctrl/tinycolor": "^3.1.6",
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.9.4",
"#material-ui/icons": "^4.4.3",
"#material-ui/pickers": "^3.2.10",
"#material-ui/styles": "^4.10.0",
"#react-google-maps/api": "^1.8.6",
"async": "^3.1.1",
"axios": "^0.21.1",
"babel-eslint": "^10.1.0",
"bootstrap": "^4.3.1",
"bootstrap-daterangepicker": "^3.0.5",
"chart.js": "^2.9.4",
"ckeditor": "^4.12.1",
"ckeditor4": "^4.15.1",
"clsx": "^1.1.1",
"crypto-js": "^4.0.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"filestack-js": "^0.11.5",
"firebase": "^7.24.0",
"grapesjs": "^0.16.34",
"grapesjs-blocks-flexbox": "^0.1.1",
"grapesjs-lory-slider": "^0.1.5",
"grapesjs-parser-postcss": "^0.1.1",
"grapesjs-plugin-ckeditor": "0.0.10",
"grapesjs-style-bg": "^1.0.3",
"grapesjs-style-filter": "^0.1.3",
"grapesjs-style-gradient": "^2.0.3",
"grapick": "^0.1.9",
"intro.js": "^3.1.0",
"intro.js-react": "^0.2.0",
"jimp": "^0.14.0",
"jquery": "^3.5.1",
"moment": "^2.25.3",
"moment-timezone": "^0.5.32",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-beautiful-dnd": "^11.0.5",
"react-bootstrap": "^1.4.0",
"react-bootstrap-daterangepicker": "^4.1.0",
"react-chartjs-2": "^2.11.1",
"react-color": "^2.18.1",
"react-cookie": "^4.0.1",
"react-dom": "^16.9.0",
"react-dropzone": "^10.2.1",
"react-favicon": "0.0.17",
"react-firebase-file-uploader": "^2.4.3",
"react-firebaseui": "^4.1.0",
"react-google-autocomplete": "^1.1.3",
"react-helmet": "^6.1.0",
"react-icons": "^4.1.0",
"react-iframe": "^1.8.0",
"react-input-mask": "^2.0.4",
"react-instafeed": "^1.0.0",
"react-meta-tags": "^0.7.4",
"react-number-format": "^4.3.0",
"react-redux": "^7.1.1",
"react-redux-loading-bar": "^4.5.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.3",
"react-select": "^3.0.8",
"react-toastify": "^5.4.1",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"spectrum-colorpicker": "^1.8.1",
"tinycolor2": "^1.4.1",
"wowjs": "^1.1.3"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"scripts": {
"start": "react-scripts start --env.ENVIRONMENT=production",
"dev": "react-scripts start --env.ENVIRONMENT=development",
"build": "set \"HTTPS=true\" && react-scripts build --env.ENVIRONMENT=production",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "patch-package",
"deploy": "git push heroku master",
"clean-cache": "heroku builds:cache:purge"
},
"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": {
"eslint-plugin-react-hooks": "^2.5.0",
"patch-package": "^6.2.2",
"remote-redux-devtools": "^0.5.16"
}
}
Node & NPM versions:
user#beast$ npm -v
6.14.10
user#beast$ node -v
v14.15.4
I'm out of ideas at this point. I've pushed over 30 new versions into Heroku thus far, any suggestion is welcomed.
Ok, I got it to work! :)))))) Every single time when I ran out of ideas and post a question here, even after days of trial and errors, somehow I arrive to a solution.
Basically my solution was debugging it properly.
With #jonrsharpe suggestion about serving it from a proper server, I tried running it locally by running serve -s -d build and this gave me a proper error details. I was getting gibberish on the browser, and the server output showed a TLS handshake error (HTTPS), which is understandable since I am running it locally. So all I did was remove set \"HTTPS=true\" from the package.json[scripts.build] and included package.json[scripts.start] : "serve -s build".
My final package.json:
{
[...],
"scripts": {
"start": "serve -s build",
"dev": "react-scripts start --env.ENVIRONMENT=development",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "patch-package",
"deploy": "git push heroku master",
"clean-cache": "heroku builds:cache:purge -a myapp"
},
[...]
}
I swear I had tried serve it using serve -s build. Two things I did different, I installed certbot (LetsEncrypt) locally (I was going to set up SSL certificates locally to debug it further but I got it to work in the production server as I was setting this up.) And the other thing was removing set \"HTTPS=true\" as mentioned already. So I am not completely sure what did it.
I added back set \"HTTPS=true\" to package.json but the app isn't redirecting to HTTPS anymore... but that's fine and minor, at least right now I can deploy it.

/bin/sh: SET: command not found

I cloned a react project that contains the following package.json. After yarn, yarn start gave me the following error. I tried yarn add react-scripts start, but it still did not work.
I am using MacOS.
Could anyone help?
$ yarn start
yarn run v1.21.1
$ SET PORT=8000 && react-scripts start
/bin/sh: SET: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.20.0",
"node-sass": "^4.13.1",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "SET PORT=8000 && react-scripts start",
"build": "react-scripts --max_old_space_size=8096 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/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33"
}
}
On Posixes, the most compatible is "env PORT=8000 react-scripts start".
This is why the cross-env package exists; it does the right thing on both Windows and Posix systems.
On MacOS you don't need the SET. Change the content of the start script of the package.json to PORT=8000 react-scripts start.
Better yet, to support cross-OS environment variables setting you could use something like cross-env .
To do so, add the dependency to cross-env (yarn install --dev cross-env) and then rewrite the start script to cross-env PORT=8000 react-scripts start.
I think what you're looking for is this, to set the environment variable before executing the command: PORT=8000 react-scripts start, as Linux/Unix systems don't use the SET command to set environment variables like Windows does
If you're having issues with the react-scripts command not being found, directly reference the local version of the package using this command: PORT=8000 ./node_modules/.bin/react-scripts start

"serve -s build" returns "serve: command not found"

I cloned a react project, which was probably developed under pure Windows, into WSL of my windows.
It seems that, to launch a react app properly in IE and Edge, we need to build the project and serve it. So I did yarn add react-scripts, yarn install and yarn build, which gave me:
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
Then,
$ yarn global add serve
yarn global v1.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "serve#11.3.0" with binaries:
- serve
Done in 1.49s.
$ serve -s build
No command 'serve' found, did you mean:
Command 'pserve' from package 'python-pyramid' (universe)
Command 'server' from package 'rsplib-legacy-wrappers' (universe)
serve: command not found
Here is package.json. Does anyone know what's the problem?
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.20.0",
"node-sass": "^4.13.1",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "^3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "SET PORT=8000 && react-scripts start",
"build": "react-scripts --max_old_space_size=8096 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/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33"
}
}
in package.json u can add some step like
"scripts": {
...
"start:prod": "serve -s dist -l 3000"
...
}
after that run locally
npm run-script start:prod
you need to add serve globally with compatible version with node version.

I cant start React app after deploy to GCP because of missing module 'eslint/lib/formatters/stylish'

My React app works ok but when I deploy to Google Cloud Platform i get this error in the browser
./src/index.js Module build failed: Error: Cannot find module
'eslint/lib/formatters/stylish'
This error occurred during the build time and cannot be dismissed.
I have read many Google answers on this like This but no luck.
I have tried remove package-lock.json and node_modules and then run npm install, that made no difference still get the error
Here is my package.json
{
"name": "AspNetCoreReactRedux",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.2.0",
"#material-ui/icons": "^4.2.1",
"bootstrap": "^4.1.3",
"jquery": "3.3.1",
"primereact": "3.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^5.0.6",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.8",
"react-scripts": "^1.1.5",
"reactstrap": "^6.3.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"rimraf": "^2.6.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"ajv": "^6.0.0",
"babel-eslint": "^7.2.3",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.11.1"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
}
}
I think there is something wrong with the package.json but dont know what
I read that I could try:
If you haven't ejected and see this problem:
Remove anything with the word eslint from package.json
Remove package-lock.json and yarn.lock
Remove node_modules
Run npm install (or yarn if you use it)
But is that safe to do, will that not remove the eslint?
ok i did this and now I can deploy
Remove anything with the word eslint from package.json
Remove package-lock.json and yarn.lock
Remove node_modules
Run npm install (or yarn if you use it)

Heroku is deploying old react?

Im using laravel framework (as rest api) and reactjs (to render views). I did a lot of changes to my code (local) and then pushed it on github and deploy on heroku. I noticed that react app is rendering old code version when laravel api works fine (i can use routes which i added). Why react didnt update?
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {},
"dependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.23.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"gh-pages": "^2.0.1",
"react-icons": "^3.2.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"styled-components": "^4.0.2",
"react-router-dom": "^4.3.1",
"redux-thunk": "^2.3.0"
}
}
May be the problem with your browser cache. Not in heroku. Please clear your browser cache and open your app again
Okay i figured it out! I need to render project on localhost to regenerate app.js in public/js before deploy on heroku -_-'

Resources