Heroku is deploying old react? - reactjs

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 -_-'

Related

Issues getting Offcanvas working with reactstrap

I'm working with an old react app. I want to use the Offcanvas component that's in reactstrap but the version I'm on does that not that installed.
Since the app is rather old I tried to do a pass and update everything at once. This however broke the app. So to keep my sanity I'm trying to only update the reactstrap lib. I ran npm update reactstrap npm update bootstrap and npm update react-bootstrap but I'm still getting a warning "export 'Offcanvas' was not found in 'reactstrap'
I do not have that much experience when it comes to react so I'm struggling when it comes to updates and configurations. Any advice on this issues and a general way to debug this would be extremely welcomed.
Here's my 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": {
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-react": "^7.7.0",
"axios": "^0.19",
"bootstrap": "^4.3.1",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.23.3",
"sass-loader": "^7.3.1"
},
"dependencies": {
"#babel/runtime": "^7.17.9",
"#fortawesome/fontawesome-svg-core": "^1.2.25",
"#fortawesome/free-solid-svg-icons": "^5.11.2",
"#fortawesome/react-fontawesome": "^0.1.7",
"#yaireo/tagify": "^4.8.1",
"datepicker": "0.0.0",
"query-string": "^6.9.0",
"react-autosuggest": "^9.4.3",
"react-bootstrap": "^2.0.0-rc.0",
"react-confirm-alert": "^2.4.1",
"react-draggable": "^3.3.2",
"react-router-dom": "^5.1.2",
"react-switch": "^5.0.1",
"react-table": "^7.7.0",
"react-tabs": "^3.0.0",
"reactstrap": "^8.1.1",
"recharts": "^1.8.5",
"styled-components": "^5.3.0"
}
}
You have to upgrade your react-bootstrap:
npm i react-bootstrap#latest

Change old React app to work with React Dev Tools

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.

React js error TypeError: React.memo is not a function

I am new in react js just now I have a install data-table component using npm install react-data-table-component styled-components and apply its basic example but its give me error TypeError: React.memo is not a function I have try to google its but all solutions about the redux currently I am using this my package.json file
{
"private": true,
"scripts": {
"dev": "npm run development",
"start": "react-scripts start",
"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": {
"#babel/preset-react": "^7.0.0",
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"mui-datatables": "^2.12.4",
"react-data-table-component": "^3.9.0",
"react-notifications-component": "^2.2.3",
"react-router-dom": "^5.1.2",
"styled-components": "^4.4.1"
}
}
Thanks
You are using react 16.2 but React.memo was released in 16.6. The library you are using requires the newer version of React.

how to check dependency versions in expo react

I am using expo, react native and react together with react native web. I am upgrading to expo#32 and thus react-native#57.1
I am running everything great on phone however not on web. with a dependency error often displayed:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '../Components/AccessibilityInfo/AccessibilityInfo' (While processing preset: "/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js")
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.get AccessibilityInfo [as AccessibilityInfo] (/Users/jeremie/piple/piple/node_modules/react-native/Libraries/react-native/react-native-implementation.js:19:12)
at /Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:163:23
at arrayEach (/Users/jeremie/piple/piple/node_modules/lodash/_arrayEach.js:15:9)
at baseClone (/Users/jeremie/piple/piple/node_modules/lodash/_baseClone.js:160:3)
at cloneDeepWith (/Users/jeremie/piple/piple/node_modules/lodash/cloneDeepWith.js:37:10)
at OptionManager.mergeOptions (/Users/jeremie/piple/piple/node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:44)
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]
I need to make sure that all my packages versions are compatible. I have looked at the changelog of react native and expo and updated everything as it should..
I don't get how to inspect more and how to debug my error.
Here is my package.json
"name": "piple",
"version": "0.7",
"private": true,
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "^0.10.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^32.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.6.3",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "NODE_ENV=test node_modules/.bin/jest",
"test:ci": "jest --ci",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"deploy:full": "./deploy",
"deploy:fast": "yarn build:prod && expo publish && git add -A && git commit -m 'new version of PiPle keep looking on our develop branch' && git push && git checkout master && git merge --no-edit devellop && git push && git checkout devellop",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"transformIgnorePatterns": [
"node_module/(?!(jest-)?react-native|react-navigation)"
],
"moduleDirectories": [
"node_modules"
],
"preset": [
"jest-expo"
]
},
"dependencies": {
"#sentry/browser": "^4.4.1",
"#sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"expo-analytics": "^1.0.7",
"expo-firebase-crashlytics": "^1.0.0",
"expo-web": "^0.0.14",
"firebase": "^5.0.3",
"get-urls": "^8.0.0",
"javascript-time-ago": "^1.0.34",
"jsc-android": "^224109.1.0",
"lodash": "^4.15.0",
"mobx": "^4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"open-graph-scraper": "^3.6.0",
"password-validator": "^4.1.1",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "^16.6.3",
"react-art": "^16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "^0.10.0",
"react-native-web-svg": "^1.0.0",
"react-navigation": "^3.0.9",
"sentry-expo": "^1.11.0",
"simple-markdown": "git://github.com/CharlesMangwa/simple-markdown.git",
"sweetalert": "^2.1.2",
"uglifyjs-webpack-plugin": "^1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
}
When you call npx expo or npx expo start it should also validate all dependencies, and if there are some problems it writes something like:
Also, npx expo-cli doctor can help by providing additional info.

How can I config React Js and React Native in same project?

I want to use react js for web and react native for mobile in same project for redux and stylesheet.
I have seen such a git repos ReactNativeWebHelloWorld but I think the application is written in older versions so I could not get it to work.
I guess Expo is coming as default with new versions.
I could not get out of the problem.
Is it possible to do this with React 16 and React Native ^ 0.5, Expo ..?
edit : for package.json
{
"name": "ReactNativeWebHelloWorld",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native-scripts start",
"ios-bundle": "react-native bundle --dev false --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"ios-dev-bundle": "react-native bundle --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"android-bundle": "react-native bundle --dev false --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"android-dev-bundle": "react-native bundle --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"web-bundle": "webpack --config web/webpack/web.prod.config.js --progress --colors",
"web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3001 --inline --hot --colors",
"clear-cache": "gulp clear-cache"
},
"dependencies": {
"babel": "^6.3.26",
"babel-polyfill": "^6.3.14",
"clone": "^2.1.1",
"morgan": "^1.6.1",
"object-assign": "^4.0.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-native": "^0.56.0",
"react-redux": "^5.0.7",
"redux": "^3.1.1",
"redux-thunk": "^2.3.0",
"superagent": "^3.8.3",
"expo": "^27.0.1"
},
"devDependencies": {
"autoprefixer": "^9.0.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.4.5",
"babel-loader": "^7.1.5",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^1.0.0",
"gulp": "^3.9.0",
"json-loader": "^0.5.4",
"less": "^3.8.0",
"less-loader": "^4.1.0",
"react-native-cli": "^2.0.1",
"react-transform-catch-errors": "^1.0.1",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.3.2",
"redux": "^4.0.0",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"redux-logger": "^3.0.6",
"style-loader": "^0.21.0",
"webpack": "^4.16.3",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5",
"webpack-hot-middleware": "^2.6.4",
"react-native-scripts": "1.14.0",
"jest-expo": "~27.0.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "jest-expo"
}
}
Edit: I take this warnings and errors when I want to run on android emulator
E:\NewProjects\react-native-web-hello-world-master>react-native run-android
Scanning folders for symlinks in E:\NewProjects\react-native-web-hello-world-master\node_modules (65ms)Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
cache fileHashes.bin (C:\Users\H³seyin\.gradle\caches\4.9\fileHashes\fileHashes.bin) is corrupt. Discarding.
> Configure project :app
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation'.
It will be removed at the end of 2018
> Task :app:mergeDebugResources FAILED
Error: E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml (Eri■im engellendi)
FAILURE: Build failed with an exception.
* What went wrong:
Failed to capture snapshot of output files for task ':app:mergeDebugResources' property 'incrementalFolder' during up-to-date check.
> Could not read path 'E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log
output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BU¦LD FAILED in 17s
11 actionable tasks: 1 executed, 10 up-to-date
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
I am running API as well react at same time
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"react": "webpack-dev-server --open --mode development",
"api": "nodemon ./bin/www",
"start": "concurrently \"npm run react\" \"npm run api\"",
"build": "webpack --mode production"
}

Resources