"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.
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"
},
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!
Run with Android
All packages have been linked successfully.
I have tried
$ ./gradlew clean #in android folder
$ react-native start
$ react-native run-android
then jest that show error
Invariant Violation: Native module cannot be null
$ jest
FAIL __tests__/SignInScreen-test.js
● Test suite failed to run
Invariant Violation: Native module cannot be null.
at invariant (node_modules/invariant/invariant.js:40:15)
at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:37:7)
at Object.<anonymous> (node_modules/react-native-reanimated/src/ReanimatedEventEmitter.js:4:16)
at Object.<anonymous> (node_modules/react-native-reanimated/src/core/AnimatedCall.js:2:1)
console.group node_modules/redux-logger/dist/redux-logger.js:1
action persist/PERSIST # 05:17:04.459
console.log node_modules/redux-logger/dist/redux-logger.js:1
prev state {
authReducer: {
...
How can i fix this error or there are solutions to test React native app like Jest?
jestSetupFile.js
import mockAsyncStorage from '#react-native-community/async-storage/jest/async-storage-mock';
jest.mock('#react-native-community/async-storage', () => mockAsyncStorage);
jest.mock('react-native-keychain', () => ({
SECURITY_LEVEL_ANY: 'MOCK_SECURITY_LEVEL_ANY',
SECURITY_LEVEL_SECURE_SOFTWARE: 'MOCK_SECURITY_LEVEL_SECURE_SOFTWARE',
SECURITY_LEVEL_SECURE_HARDWARE: 'MOCK_SECURITY_LEVEL_SECURE_HARDWARE',
setGenericPassword: jest.fn().mockResolvedValue(),
getGenericPassword: jest.fn().mockResolvedValue(),
resetGenericPassword: jest.fn().mockResolvedValue(),
}));
package.json
"jest": {
"preset": "react-native",
"setupFiles": [
"./jestSetupFile.js"
]
},
SignInScreen-test.js
import {SignInScreen} from '../screens/SignInScreen';
describe('Test Component using hooks', () => {
test('SignInScreen', () => {
expect(<SignInScreen />).toMatchSnapshot();
});
});
This is more detail about my package.json
"dependencies": {
"#react-native-community/async-storage": "^1.7.1",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.0.0-alpha.34",
"#react-navigation/native": "^5.0.0-alpha.24",
"#tradle/react-native-http": "^2.0.0",
"buffer": "^4.9.1",
"crypto": "^1.0.1",
"events": "^1.0.0",
"fast-deep-equal": "^3.1.1",
"http": "^0.0.0",
"https": "^1.0.0",
"https-browserify": "~0.0.0",
"perf_hooks": "0.0.1",
"performance": "^1.2.0",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-camera": "^3.15.1",
"react-native-charts-wrapper": "^0.5.7",
"react-native-crypto": "^2.1.0",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.6.0",
"react-native-keychain": "^4.0.5",
"react-native-paper": "^3.4.0",
"react-native-permissions": "^2.0.9",
"react-native-qrcode-scanner": "^1.3.1",
"react-native-qrcode-svg": "^6.0.3",
"react-native-randombytes": "^3.0.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.1.0",
"react-native-svg": "^11.0.1",
"react-native-swiper": "^1.6.0-nightly.5",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^2.0.13",
"react-redux": "^7.1.1",
"readable-stream": "1.0.33",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"request-promise": "^4.2.5",
"rn-nodeify": "^10.2.0",
"stellar-sdk": "^3.3.0",
"stream": "^0.0.2",
"stream-browserify": "^1.0.0",
"url": "~0.10.1",
"util": "~0.10.3",
"vm": "^0.1.0",
"vm-browserify": "0.0.4"
},
"devDependencies": {
"#babel/core": "7.6.4",
"#babel/runtime": "7.6.3",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "^25.2.6",
"eslint": "6.6.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.9.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./jestSetupFile.js"
]
},
I had a similar issue and found the solution here. Additionally, I had to include an extra dependency on the "transformIgnorePatterns" node in the package.json
I'm update React to 16.3.0 and my app crashed with Error: Cannot find module 'react-dev-utils/ignoredFiles'.
I try write this command to console: npm install --save-dev react-scripts, but it is not help, I else try delete node modules from project and reinstall it with npm i but without any result.
Dependencies from package.json:
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"radium": "^0.19.4",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
}
I will assume you're using "create-react-app"
I would recommend you delete package-lock.json then run npm install
In most cases bumping the react-scripts version in package.json and
running npm install in this folder should be enough.
npm install --save --save-exact react-scripts#1.1.4
create-react-app update
When running a unit test with Mocha we are getting the following token exception which points to Babel not transpiling.
node_modules/expo/src/Expo.js:2
import './environment/validate';
^^^^^^
SyntaxError: Unexpected token import
The mocha test points to a file that imports Constants from expo
import { Constants } from 'expo'
const config = Constants.manifest.extra
This is how the mocha opts and babel are configured
test/mocha.opts
--recursive
--require babel-register
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Dependencies
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"chai": "^4.1.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"jest-expo": "^24.0.0",
"mocha": "^5.0.0",
"react-native-scripts": "1.0.0",
"react-test-renderer": "16.0.0-alpha.6",
"rimraf": "^2.6.2",
"sinon": "^4.2.0"
},
"dependencies": {
"axios": "^0.16.2",
"dot-object": "^1.7.0",
"expo": "^24.0.0",
"google-libphonenumber": "^3.0.5",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.12.0",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.3",
"redux-thunk": "^2.2.0",
"styled-components": "^2.0.1"
}
}
We are running
yarn mocha
I just faced a similar error - many of my suites would break after I used Expo.AuthSession in a single file.
I fixed my issue by adding
jest.mock('expo', () => ({
AuthSession: {
getRedirectUrl: jest.fn(),
},
}));
to my global mock file.