Develop Reference

Module peerDependencies

I build my own React module. I read something about differences between dependencies, devDependencies and peerDependencies.
My React module has many components and some of them use third-party modules, e.g. react-icons, react-select and so on.
Btw this module use Storybook.
I specified deps in package.json
"devDependencies": {
"#babel/cli": "^7.19.3",
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-interactions": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/builder-webpack4": "^6.5.12",
"#storybook/manager-webpack4": "^6.5.12",
"#storybook/react": "^6.5.12",
"#storybook/testing-library": "^0.0.13",
"babel-loader": "^8.2.5",
"sass": "^1.55.0",
"detect-touch": "^1.1.2",
"react": "^18.2.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dnd-touch-backend": "^16.0.1",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-redux": "^8.0.4",
"react-router-dom": "^5.2.0",
"react-select": "^5.4.0",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
},
"peerDependencies": {
"react": "^18.2.0",
"redux": "^4.2.0",
}
I don't see any reason for specifying regular dependencies. I run it in Storybook and everything works, so I publish it into npm registry.
Now I install this module into my project and try run, but there's problem with non installed packages, like I said react-icons, react-select and so on.
So I probably misunderstood concept of deps.

AsyncStorage has been extracted from react-native core and will be removed in a future release

I don't know why I'm getting this warning message. I using #react-native-async-storage/async-storage.
Is there a way to fix it, without ignoring with YellowBox.
The warning message goes away when I remove the firebase config code
Warning Message:
AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
Package.json
dependencies": {
"#react-native-async-storage/async-storage": "^1.15.11",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"firebase": "^9.4.0",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "^1.10.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",
"react-native-vector-icons": "^8.1.0"
},

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

styled-components not working with create-react-library

I'm trying to import styled-components in a create-react-library module. However, when i run it I get the following error message:
Error: 'typeOf' is not exported by node_modules\react-is\index.js, imported by node_modules\styled-components\dist\styled-components.browser.esm.js
at C:\Users\roypo\Projects\Web Development\wiit-ui\node_modules\styled-components\dist\styled-components.browser.esm.js:1:9
1: import { typeOf, isElement, isValidElementType } from 'react-is';
^
2: import React, { useState, useContext, useMemo, useEffect, useRef, createElement, useDebugValue } from 'react';
3: import shallowequal from 'shallowequal';
I import styled-components like:
import styled from 'styled-components'
I added it to both the peerDependencies and devDependencies (and the regular dependencies) as follows:
"peerDependencies": {
"react": "^16.0.0",
"styled-components": "^5.1.0"
},
"devDependencies": {
"microbundle-crl": "^0.13.10",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"styled-components": "^5.1.0"
},
"dependencies": {
"styled-components": "^5.1.0"
}
(it's not intended, it's just a formatting problem)
It works fine when I use just create-react-app.
How can I fix it? Thanks in advance.
EDIT
I installed it with the following command: npm i --save styled-components

I don't really get what's going on here, but I solved this issue adding react-is as a dependency in my package.json.
npm i --save react-is
EDIT: I would like to add that I've removed and then re-added styled-components to my dependencies, but nothing changed.

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.