Hello i'm trying setup an old code react native version>0.57. Whenever i'm trying to run i'm getting this error Can't find variable: ReactPropTypes. i checked the whole code everywhere even i checked the node module nothing is wrong present i don't known what to do now. This is
my package.json file.
"dependencies": {
"crypto-js": "^3.1.9-1",
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-3d-model-view": "^1.2.0",
"react-native-camera": "^1.6.4",
"react-native-customisable-switch": "^0.1.0",
"react-native-datepicker": "^1.7.2",
"react-native-easy-grid": "^0.2.1",
"react-native-elements": "^0.19.1",
"react-native-facebook-login": "^1.6.1",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.13.3",
"react-native-gesture-handler": "^1.0.12",
"react-native-icon-badge": "^1.1.3",
"react-native-image-marker": "^0.3.9",
"react-native-image-picker": "^0.28.0",
"react-native-imagepicker": "^2.0.0",
"react-native-location": "^2.1.1",
"react-native-maps": "^0.22.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-modal-picker": "0.0.16",
"react-native-pdf": "^5.0.11",
"react-native-pdf-view": "^0.3.2",
"react-native-picker-dropdown": "^0.1.2",
"react-native-progress": "^3.5.0",
"react-native-push-notification": "^3.1.2",
"react-native-share": "^1.1.3",
"react-native-side-menu": "^1.1.3",
"react-native-size-matters": "^0.1.6",
"react-native-stripe": "^1.2.2",
"react-native-stripe-api": "^0.1.0",
"react-native-switch": "^1.5.0",
"react-native-table-component": "^1.2.0",
"react-native-vector-icons": "^4.6.0",
"react-native-view-shot": "^2.5.0",
"react-native-zip-archive": "^3.0.1",
"react-navigation": "^3.0.9",
"react-notification-badge": "^1.4.0",
"react-viro": "^2.7.3",
"rn-fetch-blob": "^0.10.15",
"three": "^0.100.0",
"tipsi-stripe": "^7.2.0",
"toggle-switch-react-native": "^2.0.2"
},
Any help will be appreciated. i'm running this in android.
That's probably because in your code somewhere you might have used React Proptypes.
This is particularly a type checking library where you can define about the type casted variables which you pass as props whether they need to be in string or a integer or a array or a function etc. Try importing it in the page where you used but before that install the library. Prop type is used for strict coding structure.
Try the steps here to install the library.
Related
I'm trying to make a Shopify Hydrogen app and install TailwindCSS.
I've followed all the steps in the Hydrogen docs: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development
For some reason I cannot run the scripts due to the previously mentioned error.
Dependencies:
"dependencies": {
"#remix-run/react": "1.12.0",
"#shopify/cli": "3.29.0",
"#shopify/cli-hydrogen": "^4.0.6",
"#shopify/hydrogen": "^2023.1.4",
"#shopify/remix-oxygen": "^1.0.3",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#remix-run/dev": "1.12.0",
"#shopify/prettier-config": "^1.1.2",
"autoprefixer": "^10.4.13",
"concurrently": "^7.6.0",
"eslint": "^8.20.0",
"eslint-plugin-hydrogen": "0.12.2",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"prettier": "^2.8.4",
"tailwindcss": "^3.2.7"
},
"dependencies": {
"#formatjs/intl-pluralrules": "^4.0.28",
"#formatjs/intl-relativetimeformat": "^9.1.7",
"#fortawesome/fontawesome-free": "^5.15.3",
"#popperjs/core": "~2.10.1",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"chart.js": "^3.3.2",
"clsx": "^1.1.1",
"del": "^6.0.0",
"formik": "^2.2.9",
"line-awesome": "^1.3.0",
"lint-staged": "^11.0.0",
"mini-css-extract-plugin": "1.6.2",
"nouislider": "^15.2.0",
"object-path": "^0.11.5",
"path": "^0.12.7",
"prism-react-renderer": "^1.2.1",
"prism-themes": "^1.7.0",
"prismjs": "^1.23.0",
"qs": "6.10.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.1.0",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2",
"react-inlinesvg": "^2.3.0",
"react-intl": "^5.20.4",
"react-is": "^17.0.2",
"react-query": "^3.34.12",
"react-router-dom": "6.2.1",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"react-topbar-progress-indicator": "^4.1.0",
"rtlcss-webpack-plugin": "^4.0.6",
"sass": "1.32.1",
"socicon": "^3.0.5",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.11"
},
./src/_metronic/partials/modals/create-app/Main.tsx
Module not found: Can't resolve 'formik' in 'C:\Live projects\New folder (2)\src\_metronic\partials\modals\create-app'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
import {useFormik} from 'formik'
"formik": "^2.2.9",
enter image description here./src/_metronic/partials/modals/create-app/Main.tsx
When i did use this yarn add formik or npm install --save formik command, I was after install,I got "formik": "^2.2.9",But i did not solve above issue, Why it's happening error i did not get,I was tried remove node modules and package lock json but no use, I hope please be can you help for me on this issue?
To confirm: When you removed node_modules and package-lock.json you did remember to run npm install to get them back right? by apokryfos.
Try deleting the node modules and package-lock.json then redo yarn install!->by
Dharmik Patel
Both are helpful for fixed issue this credit goes to them only, thanks for all.
I have a page written in tsx that keeps crashing on load with the error client.watchQuery cannot be called with fetchPolicy set to "standby", even though the query in question is useLazyQuery (so it hasn't run yet), and has the option fetchPolicy: 'no-cache'. It crashes for me, but not for my teammates, which makes me think it might have something to do with package versions of maybe my local typescript, but I've set and re-set it every way I can think of with no improvement. The relevant code and package.json are below. Any insight at all would be wonderful.
// myfile.tsx
const [getRoles] = useLazyQuery(GET_ALL_ACCOUNT_ROLES, {
fetchPolicy: 'no-cache',
onError: (e) => {
console.error(e.message);
showPrompt({ type: 'error', message: 400 });
},
onCompleted: async (data) => {
const {
getAllAccountRoles: { data: res }
} = data;
setAllRoles(res);
}
});
package.json
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#aws-amplify/api": "^4.0.13",
"#aws-amplify/auth": "^4.1.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#loadable/component": "^5.15.0",
"#mui/icons-material": "^5.1.0",
"#mui/material": "^5.1.0",
"#mui/system": "^5.1.0",
"#reach/router": "^1.3.4",
"#rinxun/custom-questions": "^1.1.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"aws-appsync-auth-link": "^3.0.6",
"check-equal": "^1.0.7",
"clsx": "^1.1.1",
"dotenv": "^10.0.0",
"env-cmd": "^10.1.0",
"mockjs": "^1.1.0",
"qrcode.react": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-scripts": "4.0.3",
"store": "^2.0.12",
"uuid": "^8.3.2"
},
"devDependencies": {
"#storybook/addon-actions": "^6.3.2",
"#storybook/addon-essentials": "^6.3.2",
"#storybook/addon-links": "^6.3.2",
"#storybook/node-logger": "^6.3.2",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.3.2",
"#types/aws4": "^1.5.2",
"#types/jest": "^26.0.24",
"#types/loadable__component": "^5.13.4",
"#types/qrcode.react": "^1.0.2",
"#types/react": "^17.0.15",
"#types/react-dom": "^17.0.9",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"aws4": "^1.11.0",
"babel-eslint": "^10.1.0",
"babel-loader": "8.1.0",
"eslint": "^7.32.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"graphql": "^15.5.1",
"lint-staged": "^11.1.1",
"prettier": "2.3.2",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1"
},
I was having a similar problem. Traced it back to the issue useQuery doesn't seem to use defaultOptions in 3.5 in #apollo/client (a dependency of #apollo/react-hooks).
Solution for me was to downgrade by setting "#apollo/client": "~3.4.0" in the package.json and run npm install. Check your package-lock.json to ensure you've replaced your 3.5.x version.
#apollo/react-hooks has a dependency of #apollo-client.
If you have imported useQuery from #apollo/react-hooks, then you need to import useQuery/useLazyQuery from #apollo-client instead of #apollo/react-hooks, along with the version lower than 3.5.
I scoured the internet for this error on a build with an existing react app that was using nwb before finally stumbling upon this. In my case, the apollo client version was 3.0.2. Updating my package.json "#apollo/client": "~3.4.0" and re running npm i finally did the trick. Thank you #GratefulGuest!
Every time when I update the app server with some changes then my app takes a hard reload. Otherwise, I can't see the changes.
From my perspective, It's a problem.
My users don't know when I update the server, and I can't tell my users that you need a hard reload.
Now how can I solve this problem?
Here is my dependencies:
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.58",
"#material-ui/styles": "^4.11.4",
"#sentry/react": "^6.2.0",
"#sentry/tracing": "^6.2.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"axios-hooks": "^2.1.0",
"bootstrap": "^4.5.0",
"bootstrap-daterangepicker": "^3.1.0",
"chart.js": "^2.9.3",
"chroma-js": "^2.1.0",
"date-fns": "^2.22.1",
"gh-pages": "^2.2.0",
"history": "^4.10.1",
"html-react-parser": "^0.13.0",
"i": "^0.3.6",
"i18next": "^19.5.1",
"i18next-browser-languagedetector": "^5.0.0",
"i18next-http-backend": "^1.0.15",
"i18next-xhr-backend": "^3.2.2",
"jwt-decode": "^3.0.0-beta.2",
"lodash.throttle": "^4.1.1",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-bootstrap-4-pagination": "^1.0.3",
"react-bootstrap-datetimerangepicker": "^2.0.4",
"react-chartjs-2": "^2.11.1",
"react-circular-progressbar": "^2.0.3",
"react-color": "^2.18.1",
"react-cookie-consent": "^6.2.3",
"react-date-range": "^1.2.0",
"react-datepicker": "^3.4.1",
"react-dom": "^16.13.1",
"react-flags-select": "^1.1.12",
"react-ga": "^3.3.0",
"react-google-login": "^5.2.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6.3.1",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.7.0",
"react-moment": "^0.9.7",
"react-nested-loader": "^2.2.1",
"react-paginate": "^7.1.0",
"react-pro-sidebar": "^0.6.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-script-tag": "^1.1.2",
"react-scripts": "^3.4.3",
"react-scroll": "^1.7.16",
"react-select": "^3.1.0",
"react-select-country-list": "^2.2.1",
"react-tabs": "^3.1.1",
"reactcss": "^1.2.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"semantic-ui-react": "^0.88.2",
"styled-components": "^5.2.3",
"swiper": "^6.7.0",
"universal-cookie": "^4.0.3",
"use-dynamic-refs": "^1.0.0",
"validator": "^13.1.1"
},
In client side many JS chunks and assets are fetched from the server. To make the loading fast, caching is used on server as well as browser.
When you restart your server there might be chance that old cache is still being used. It takes a hard refresh to remove the old cache if not being done automatically. You can change server caching time/strategy to fix this.
Or use service worker on client side to manage chunks fast and better
I am getting this error 'invalid stream token' when using Firebase and React native. The code I am using is pretty simple:
window.firebaseApp.auth().onAuthStateChanged(async (auth) => {
if (auth) {
const uid = auth.uid;
await window.firebaseApp
.firestore()
.collection("users")
.doc(auth.uid)
.update({
lastSignIn: 10,
});
}
});
I have initialized Firebase, and I can see the correct UID coming back in auth.uid.
I noticed that when I run this in debugger mode and can step through the javascript in my web browser, I do not encounter this issue. However, when it is not in debugger mode (and everything is running on my phone) this issue appears.
Versions from my package.json:
"#react-native-community/datetimepicker": "2.2.2",
"#react-native-community/masked-view": "0.1.6",
"#react-native-firebase/app": "^7.3.1",
"#react-navigation/bottom-tabs": "^5.5.1",
"#react-navigation/drawer": "^5.7.4",
"#react-navigation/native": "^5.5.0",
"#react-navigation/stack": "^5.4.1",
"atob": "^2.1.2",
"expo": "~37.0.3",
"expo-asset": "~8.1.5",
"expo-av": "~8.1.0",
"expo-constants": "~9.0.0",
"expo-font": "~8.1.0",
"expo-web-browser": "~8.2.1",
"firebase": "7.15.5",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "2.2.0",
"react-native-svg": "11.0.1",
"react-native-typography": "1.4.1",
"react-native-web": "~0.11.7",
"react-native-webview": "8.1.1",
"react-redux": "^7.2.0",
"react-request": ">=3.1.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"