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
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
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.
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.
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.
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"
}