Develop Reference

NPM Dependency Conflict with React

I just started working on a new project with React 17, then just a week ago React 18 was launched so I upgraded my project to React 18 after I went through their documentation, everything was going fine until I changed my laptop, I cloned the project from GitHub to my other laptop, and when I tried to "NPM install" it kept giving me NPM dependency error, although it worked fine after I put "--legacy-deep-peers", but now when ever I have to install a dependency I have to use the "--legacy-dep-peers" with it or it keeps giving me the same error, is there a workaround with this or I have to keep using this keyword with all of my new dependencies.
The Error Snippet
https://i.stack.imgur.com/BfKJU.png
My Package.json Dependencies
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"framer-motion": "^6.2.9",
"hamburger-react": "^2.5.0",
"js-cookie": "^3.0.1",
"nanoid": "^3.3.1",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-bootstrap": "^2.2.0",
"react-datepicker": "^4.7.0",
"react-dnd": "^16.0.0",
"react-dnd-html5-backend": "^16.0.0",
"react-dom": "^18.0.0",
"react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-multi-carousel": "^2.8.0",
"react-redux": "^7.2.8",
"react-router": "^6.2.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"react-tag-input": "^6.8.0",
"react-toastify": "^8.2.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.4"}

Trying to removed unused imports with a pre-commit hook but imports that are being used are getting removed

I just installed eslint-plugin-unused-imports. When I commit, it does all its linting work and removed a bunch of imports even though many of those imports are being used in the file.
May or may not be worth noting, this project has a bunch of legacy Backbone and newer React components, with some Backbone views rendering React components. Also, this is a JS not TS project.
eslint-plugin-unused-imports issues states:
https://github.com/sweepline/eslint-plugin-unused-imports/issues/new?assignees=&labels=&template=bug_report.md&title=
If the issue is with something being marked wrongly as a unused import
and therefore being removed. It is an issue with the imported package
(#typescript-eslint/eslint-plugin for TS or eslint for JS) and its
no-unused-vars rule. I cannot do anything about this except updating
if a fix is made upstream.
If new rules are added no-unused-vars upstream which should be
autofixed, mark your issue rule addition.
But I'm not sure how to address this.
Below is my linting setup:
"devDependencies": {
...
"eslint": "^6.8.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^6.10.3",
"eslint-plugin-standard": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.0",
...
"prettier": "^2.2.1",
"prettier-eslint": "^9.0.0",
"prettier-eslint-cli": "^5.0.0",
"prettier-stylelint": "^0.4.2",
...
"stylelint": "^9.8.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-prettier": "^1.1.2",
...
},
"peerDependencies": {
"eslint": ">=6.0.1",
"eslint-plugin-import": ">=2.18.0",
"eslint-plugin-node": ">=9.1.0",
"eslint-plugin-promise": ">=4.2.1",
"eslint-plugin-standard": ">=4.0.0"
},
"lint-staged": {
"src/**/*.{js,json,jsx,scss}": [
"node ./scripts/lint-prettier.js"
],
"*.{js,jsx,json,md}": [
"prettier --list-different"
]
},
...
"husky": {
"hooks": {
"pre-commit": "lint-staged && npm test"
}
}
}

How to solve Module not found: Can't resolve '#babel/runtime/core-js/map' in Material-UI

I am using Material UI for React, I updated the Material-UI to the latest version and it is giving me following error
../node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '#babel/runtime/core-js/map' in
'C:\Users\User\Documents\code\react\node_modules\material-ui\styles'
I downgraded to the previous version of the Material-UI as well, worked around with installing the correct version of babel as well but still having the same issue.
Here is my package.json
"dependencies": {
"#babel/runtime": "^7.4.0",
"#material-ui/core": "^4.1.3",
"#material-ui/icons": "^3.0.2",
"#material-ui/lab": "^3.0.0-alpha.30",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"material-auto-rotating-carousel": "^3.0.1",
"material-auto-rotating-carousel-refurb": "^1.0.1",
"react": "^16.8.6",
"react-animated-slider": "^1.1.4",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.8.6",
"react-motion": "^0.5.2",
"react-responsive-carousel": "^3.1.49",
"react-router": "^3.2.3",
"react-scripts": "2.1.2",
"react-slick": "^0.23.2",
"react-swipeable-views": "^0.13.3",
"react-tap-event-plugin": "^1.0.0",
"slick-carousel": "^1.8.1"
}

I figured this issue out by adding a resolution in my package.json, but it only will work if you use yarn instead of npm.
my fix (if you use yarn)
// in your package.json
...
"resolutions": {
"material-ui/#babel/runtime": "7.0.0-beta.42"
}
...
Why does it work?, because #babel/runtime": "7.0.0-beta.42 still requires core-js as a dependency, in specific it requires core-js ^2.5.3
Alternative fix
If you are not using yarn and rather npm, you can add #babel/runtime": "7.0.0-beta.42 as a devDependency and it should be work fine as well.
I left the link to yarn resolutions, because it might be interesting for you.

bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/workspace/reactnative''

I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.
error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"axios": "^0.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"react": "16.2.0",
"react-native": "^0.57.8",
"react-native-branch": "^2.3.0",
"react-native-camera": "^1.0.0",
"react-native-datepicker": "^1.6.0",
"react-native-deep-linking": "^2.1.0",
"react-native-fabric": "^0.5.1",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-modal": "^4.1.1",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-saga": "^0.16.0",
"stripe-client": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-preset-airbnb": "^3.2.0",
"detox": "^9.0.4",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-react-native": "^3.6.0",
"jest-cli": "^23.6.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-test-renderer": "16.0.0",
"remote-redux-devtools": "^0.5.12"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"airbnb",
"#babel/preset-env",
"module:react-native",
"module:metro-react-native-babel-preset"
]
}

Deleting .babelrc file will fix this for you.
Please check react native upgrade helper
https://react-native-community.github.io/upgrade-helper
and specify your current React native version and the version to update (0.57 in your case)
You will see changes need to do in your case to make the code compatible with updated version

Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.
Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.
To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.
You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.
It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.

jest-resolve nested module resolving wrong path: Cannot find module 'react-dnd' from 'reactTags.js'

I have a module I am trying to test. That module is using other external modules and jest is having a hard time resolving them.
It is resolving the base path to:
./node_modules/react-tag-input/dist-modules/
Instead of:
./node_modules/react-tag-input/node_modules/react-dnd
Below, is a simplified version of what is happening:
Error:
Cannot find module 'react-dnd' from 'reactTags.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:160:17)
at Object.<anonymous> (node_modules/react-tag-input/dist-modules/reactTags.js:13:17)
at Object.<anonymous> (src/tagger/eventtagger.js:5:404)
This is my test file:
caseevent.test.js
import EventTagger from './eventtagger.js';
eventtagger.js
import ReactTags from 'react-tag-input';
package.json
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"modulePaths": [
"<rootDir>"
],
},
"dependencies": {
"babel-jest": "^17.0.2",
"flux": "^2.0.1",
"install": "^0.8.1",
"jest": "^17.0.3",
"lodash.flow": "^3.3.0",
"npm": "^3.10.6",
"object-assign": "^1.0.0",
"react": "^15.4.0",
"react-dnd": "git+https://github.com/jcrogel/react-dnd.git",
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^15.4.0",
"react-tag-input": "^4.4.0",
"react-tagcloud": "^0.6.1"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.14.0",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"enzyme": "^2.6.0",
"jest-cli": "^17.0.3",
"jsdom": "^9.4.0",
"lodash": "4.14.1",
"react-addons-test-utils": "^15.4.0",
"react-native": "^0.38.0",
"react-test-renderer": "15.4.0",
"sinon": "^1.17.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^2.0.1"
}
What am I missing? How do I get jest-resolve to find or mock deeper components?

I'm having the same issue as well. Some things I've attempted:
jest.unmock(module) at the top of the testing file
polyfill the module in a Jest setup file
jest.mock(jest.fn() => {console.log('do something'))
Lastly, and this seemed to work, but I can't find documentation on this:
At the top of the testing file:
/**
* #providesModule moduleName
*/
This seems to recognize the module I needed. Jest is supposed to implicitly see modules out of the box, but I haven't had that experience with it.

I had a similar problem in my jest tests, with an external dependency of webpack.
To solve that:
I create a __mocks__ folder in the same level if __test__ folder.
Inside that, I created a file with the same name of the dependency, in my case it was jquery ($.js).
Inside my test file, I use jest.mock function to reference the mock external dependency: jest.mock('$');
from jest the docs:
https://facebook.github.io/jest/docs/manual-mocks.html
Hope it could help.