React Storybook throws error when using npx sb init - reactjs

I am trying to install Storybook on my project. All I do is initialize the create-react-app and then cd to the current directory. When I enter 'npx sb init' I am getting the following errors:
• Detecting project type. ✓
• Adding Storybook support to your "Create React App" based project
Unable to find versions of #storybook/react using npm
Unable to find versions of #storybook/addon-links using npm
Unable to find versions of #storybook/addon-essentials using npm
Unable to find versions of #storybook/addon-actions using npm
Unable to find versions of #storybook/node-logger using npm
Unable to find versions of #storybook/preset-create-react-app using npm
System
Node: v16.13.0
NPM: 8.1.4
Ubuntu 21.10
Notes
I was able to find a relatable problem here, but unfortunately it doesn't seem logical to init the project on a VM and then copy it locally..

I'm using Ubuntu 20.04.
I had the same issue. The problem was that I had installed node through snap. https://github.com/nodesource/distributions/blob/master/README.md - here is the example how to install on Debian / Ubuntu without using snap.

Related

Invariant Violation: RNCSafeAreaProvider was not found in the UIManager

I'm new to react native and have some experience with using regular React and am trying to get react native navigation setup but am running into the following error when following the docs. I've tried starting from scratch and reinstalling everything as I have no clue what this error means:
Invariant Violation: RNCSafeAreaProvider was not found in the UIManager
any advice on how to fix this would be appreciated.
I recently encountered this issue. I solved it by running yarn add react-native-safe-area-context.
for anyone who comes across this error - the way I did the installation must have been wrong as starting with a fresh project and doing the commands in this order - I did not come across the same problem:
expo init 'Project-name'
cd 'Project-name'
npm run android
npm install #react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
npm install #react-navigation/stack
I solved this issue by run these commands
npm install react-native-safe-area-context
pod install
As an additionnal case: I went into this error when using react-navigation in an Expo Bare workflow, also following guide for react-navigation.
I simply fixed this with:
projectRoot $ cd ios
projectRoot/ios $ pod install

React-native-reanimated: Unable to resolve "./useValue"

I am trying to build a react native app. I have caught an error on the terminal saying
Unable to resolve "./useValue" from "node_modules\react-native-reanimated\src\Animated.js"
I reinstalled react-native-reanimated to the expected version range.
`Some of your project's dependencies are not compatible with currently installed expo package version:
react-native-reanimated - expected version range: ~1.9.0 - actual version installed: ^1.10.1
Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]`
Thus, I run the code as follow: npm install react-native-reanimated#1.9.0, but still run into the error code.
I could realy use some help on this.
try uninstalling the package ==> close ide (all instances) ==> open the ide ==> install the package again ==> run "expo start -c"
Only do this:
expo start --clear
From Expo Documentation at Expo Start command.
--clear, -c | Clear the React Native Packager cache.

How do i downgrade expo and install a specific package?

Some of your project's dependencies are not compatible with currently installed expo package version:
- #react-native-community/netinfo - expected version range: 5.5.1 - actual version installed: ^5.8.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]
Im getting this above warning. is there any cli command to do install specific expo package? if yes then please provide it. Thanks.
Into your package.json file, update the version of #react-native-community/netinfo to the right one (5.5.1), and make a npm install again.
You can also provide the version by using the cli command :
npm i #react-native-community/netinfo#5.5.1

Impossible to create a new React project

I am trying to create a new react project (I work on Mac OS).
To do that, according the documentation, I enter this :
npx create-react-app bet-front
I obtain this error :
yarn add v1.3.2
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error #typescript-eslint/eslint-plugin#2.24.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1".
error Found incompatible module
I updated my node version (here), I have now : v12.16.2
I updated npm version, I have now : 6.14.4
Despite these upgrades, I have the same errors to create a new react project. Do I have the right versions of these tools to create a new react project ? What can I do more ?
Edit 1
I already tried this without success, and same error : npm init react-app bet-front
Edit 2
I uninstalled node and npm and re installed it. And then retried the command to create a new React project. And no changes : same error about the #typescript-eslint/eslint-plugin#2.24.0.
I finally succeeded to create this new react project :
sudo npm i -g create-react-app
I do not know why it works using sudo ! usually I do not need it. Strange !
I came across the same issue after updating my node and npm versions. Used this link as guidance: https://phoenixnap.com/kb/update-node-js-version.
I didn't realize my nvm version was also out of date and finally was able to run create-react-app!
You can check your nvm version like so:
nvm -ls
Then check for the latest version available:
nvm ls-remote
Finally, install:
nvm install [version-number]
Hope this helps you as it did for me!

error while trying to install react-native -floating-action

when I'm trying to install some package
like:
react-native-floating-action
or:
react-native-action-button
I'm running the
npm i react-native-floating-action --save
and when I run react-native link
i get this error:
PS C:\Projects\projectname> react-native link
rnpm-install info Linking assets to ios project
rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'pbxprojPath' of null
Please file an issue here: https://github.com/facebook/react-native/issues
Cannot read property 'pbxprojPath' of null
TypeError: Cannot read property 'pbxprojPath' of null
at Object.linkAssetsIOS [as copyAssets] (C:\Projects\projectname\node_modules\react-native\local-cli\link\ios\copyAssets.js:24:41)
at C:\Projects\projectname\node_modules\react-native\local-cli\link\link.js:104:12
at Array.forEach (<anonymous>)
at linkAssets (C:\Projects\projectname\node_modules\react-native\local-cli\link\link.js:94:28)
at C:\Projects\projectname\node_modules\react-native\local-cli\link\link.js:171:30
these are my versions:
react-native-cli: 2.0.1
react-native: 0.57.1
npm --version
6.4.1
expo --version
2.6.14
Expo does not support linked binaries. If you require linked binaries, you must first Eject from Expo to ExpoKit or initialize your project using react-native init MyProjName
Reference
If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll just need to "eject" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.
https://facebook.github.io/react-native/docs/getting-started.html
This worked for me:
npm update
react-native link
Eventually, I found the problem,
I needed to run react-native upgrade, and had a different version of react-native in the package.json from the node_modules
writing ^0.57.8 (current react-native version) on the packge.json:
"react-native": "^0.57.8",
running npm install
setting a name for the project in the package.json:
"name":"somename"
and running
react-native upgrade
react-native link
everything was ok
seems to me that it's always a matter of versions with react-native errors

Resources