React native jest: While resolving: image-jest#1.0.0 npm ERR! Found: react#17.0.1 - react-native

I am trying to install #testing-library/react-native to a freshly created expo-based react native application.
For adding test cases, I followed the steps mentioned in https://docs.expo.dev/guides/testing-with-jest/ and installed jest and jest-expo.
After that, I tried installing #testing-library/react-native using command
npm install --save-dev #testing-library/react-native
and started getting the below error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: image-jest#1.0.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"17.0.1" from the root project
npm ERR! peer react#">=16.0.0" from #testing-library/react-native#9.0.0
npm ERR! node_modules/#testing-library/react-native
npm ERR! dev #testing-library/react-native#"*" from the root project
npm ERR! 1 more (react-native)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.2" from react-test-renderer#17.0.2
npm ERR! node_modules/react-test-renderer
npm ERR! peer react-test-renderer#">=16.0.0" from #testing-library/react-native#9.0.0
npm ERR! node_modules/#testing-library/react-native
npm ERR! dev #testing-library/react-native#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
My package.json looks like below
{
"name": "image-jest",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/jest": "^27.4.1",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"jest": "^26.6.3",
"jest-expo": "^44.0.1",
"typescript": "~4.3.5"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
]
},
"private": true
}
I am unable to understand what is causing the issue. Can anyone suggest what can be done to fix it?

The error is because the react-test-renderer#17.0.2 requires react#17.0.2,
while you have an older version of react.
Try to install an older version of react-test-renderer first:
npm i react-test-renderer#17.0.1
And then install #testing-library/react-native

Related

Following along with a 'blog tutorial' but npm run dev not working for me

Following along with a 'blog tutorial' but npm run dev not working for me.
Terminal:
candicetomkins#Candys-Air ~/Desktop/cms-blog $ npm run dev [ruby-2.6.8p205]
npm ERR! Missing script: "dev"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/candicetomkins/.npm/_logs/2022-06-27T15_49_33_958Z-debug-0.log
Package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2"
}
}
What have I missed here? Thanks!
You have to check your NPM version. It should be because of version mismatched issue. Make sure your nodeJS and NPM version be updated

run into problems with npm install

I just clone my project from github, but when I run npm install, an error occurred.
This project runs perfectly on my pc. However, it can't even be initialized on my linux laptop. Any solutions?
Here is the error message,
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#testing-yarnlibrary%2freact - Not found
npm ERR! 404
npm ERR! 404 '#testing-yarnlibrary/react#^11.1.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/anthonyzhang/.npm/_logs/2021-08-13T17_45_59_614Z-debug.log
package.json,
{
"name": "qrcode-ordering",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-yarnlibrary/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"css-loader": "^6.2.0",
"style-loader": "^3.2.1"
}
}
You misspelled #testing-library/react in your package.json as #testing-yarnlibrary/react
https://yarnpkg.com/package/#testing-library/react

Failed to install Vuex in Vue3

I want to install Vuex but I get an error.
// error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vuejs-v-3#0.1.0
npm ERR! Found: vue#3.1.2
npm ERR! node_modules/vue
npm ERR! vue#"^3.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^2.0.0" from vuex#3.6.2
npm ERR! node_modules/vuex
npm ERR! vuex#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/hap/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/hap/.npm/_logs/2021-06-24T06_46_36_463Z-debug.log
// package.json
{
"name": "vuejs-v-3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#apollo/client": "^3.3.20",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"core-js": "^3.6.5",
"graphql": "^15.5.1",
"vue": "^3.1.2",
"vue-router": "^4.0.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
When using Vue3, refer to Vuex 4 Documentation to install Vuex 4 with
npm install vuex#next --save
and when using Vue2, refer to Vuex 3 Documentation to install Vuex 3 with
npm install vuex --save
As #Seegy said,
Vue 3 uses Vuex 4
Vue 2 uses Vuex 3
As of Feb 2022,
If you are using Vue 2, use the following to install Vuex 3
npm install vuex#3.4.0 --save
If you are using Vue 3, use the following to install Vuex 4
npm install vuex --save or npm install vuex#next --save
had the same error just try
npm install vuex#next --save
instead of npm install vuex --save and it will work
This works for me: npm install vuex#next --save --force.
I tried this before but it didn't work for me
npm install vuex --save
So, this worked for me:
npm install vuex#next --save

Vue create project - Cannot find module 'vue-loader-v16/package.json'

I have vue-cli installed globally via command npm install -g #vue/cli And I tried to create new project via command vue create examples-vue-2 Everything was ok until I run npm run serve. This command throws me an error Cannot find module 'vue-loader-v16/package.json'.
I am on Win 10, npm 6.7.0, node 11.15.0
Here is whole console log
λ npm run serve
> examples-vue-2#0.1.0 serve c:\wamp64-3-2-0\www\examples-vue-2
> vue-cli-service serve
INFO Starting development server...
ERROR Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
at Function.Module._load (internal/modules/cjs/loader.js:591:27)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at api.chainWebpack.webpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\config\base.js:114:23)
at webpackChainFns.forEach.fn (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:236:40)
at Array.forEach (<anonymous>)
at Service.resolveChainableWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:236:26)
at Service.resolveWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:240:48)
at PluginAPI.resolveWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! examples-vue-2#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the examples-vue-2#0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\vladi\AppData\Roaming\npm-cache\_logs\2020-08-19T08_20_22_147Z-debug.log
package.json
{
"name": "examples-vue-2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Many thanks for help.
This works for me:
npm install --save-dev vue-loader-v16
Solution is in this vue-cli package issue https://github.com/vuejs/vue-cli/pull/5718
You may need to update npm version to install missing package.

Angular 8 npm install fails

I just recently upgraded to Angular 8 and my local build passing with aot. But in Jenkins build getting failed with below error. Can anyone help?
Here is the error
npm install
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues.
Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated circular-json#0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated uws#9.148.0: New code is available at github.com/uNetworking/uWebSockets.js
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git#github.com/pemrouz/buble.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-01-25T10_05_09_308Z-debug.log
here is my package json
"name": "olam-global-survey-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"popper": "^1.0.1",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "~8.3.23",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}
It's a npm cache problem.
just find npm-cache folder and delete it,
open terminal in administrator mode or use sudo if your OS supports linux
or
use npm clean-install
When you upgrade angular 8 its installs all default packages with Bootstrap 4. Bootstrap 4 installs popper.js package which helps for tooltip
Initial popper.js version will be ^1.0.1 and it is not supported with Angular 8 and Node 13. So we have to upgrade the package to version "popper.js": "^1.16.1"