Failed to Create react-project Using Create-React-app - reactjs

I've Installed Create-react-app globally in my system but I'm unable to create react projects with it.I have followed similar issues on stackoverflow but none of them have a solution.
My Node version: 12.16.2
My NPM version : 6.14.4
Please help me to move on with this.

Related

React Storybook throws error when using npx sb init

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.

Error: "createRequire is not a function Referenced from: BaseConfig"

I have a freshly cloned repo created from the create-react-app template. I npm install to install the packages and then npm start to serve the files on localhost:3000. My coworker (the repo creator) is not having any issues.
However, I see the page flash for a second and then I get the following error:
Failed to compile
createRequire is not a function
Referenced from: BaseConfig
The error message doesn't provide any other information to help trace which file it could be coming from.
I've tried the following to troubleshoot:
Deleting node_modules and package-lock.json and re-installing
Deleting the entire repo and re-cloning
Searching for 'createRequire' or 'BaseConfig' in project files found no results
Searching online for similar issues. None seem to have the same error I'm encountering.
Other details:
npm version 6.14.8
react version 17.0.1
Any idea where this error could be coming from or what steps I can do to trace it?
TL;DR Needed to upgrade node version
I tried npx create-react-app to confirm if the issue was with the template or with the project code. While doing that, I got a message that my package dependencies required a higher version of node (I was on v.10.4, the latest is v15.2.0).
Doing brew upgrade installed the latest version but didn't change the default node version across the system (ie: node -v still showed v10.4) but
doing nvm install --lts then nvm alias-default [latest-version] fixed my issue!
Some solutions are not worked for me. I uninstalled node.js and installed latest version. It worked!
It could be connected with eslint in create-react-app
try to reinstall 'eslint' or 'eslint-config-react-app'
https://github.com/AtomLinter/linter-eslint/issues/1351
BaseConfig is a variable of the create-react-app react-scripts module
in node_modules/react-scripts/config/webpack.config.js
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// #remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],
For me, downgrade the react-scripts to latest 3.x version solved my problem. I could not update the NodeJS version, as I didn't have access to NodeJS server instance. Seems it fits better with React 16.x.
I'm running and building the app at NodeJS V10.0.0.
I am a noob, but I just came across this very same error message in picking up where I previously had left off following a MERN stack tutorial. During the break, I must have switched nvm versions, and thanks to this thread I was able to correct this. From the terminal, I simply ran nvm list. From the result, I could see that I was running an older version (10.9.0) but had a newer one (10.12.0) available to me, which I switched to by running nvm use 10.12.0. This resolved my issue.

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

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!

How to install React on WebStorm

I'm having trouble installing React on an empty project in WebStorm. The instructions on the WebStorm help page tells me to get create-react-app.
Is there a way I can just get react? And if not, what is the difference between the two?
I'm trying to follow this specific tutorial series online about React for beginners. It's a 4 minute video so can anyone please explain to me what the youtuber did?
I would recommend using create-react-app because you will not need to install or configure tools like Webpack or Babel.
You need to install it from https://github.com/facebook/create-react-app if you have npm (node package manager) installed you can just type npm install -g create-react-app

Resources