I have never encountered any issue in all my time creating react-native apps using the "create-react-native-app" cli command until today. It didn't create the usual ios and android file it creates but instead only create the node_modules, package-lock.json and package.json files. Below is the output i got back when i ran the command.
$ create-react-native-app Rdx
Creating a new React Native app in /Users/apple/Documents/Vscode/Redux-Testing/Rdx.
Using package manager as npm with npm interface.
Installing packages. This might take a couple minutes.
Installing react-native-scripts...
npm notice created a lockfile as package-lock.json. You should commit this file.
+ react-native-scripts#2.0.1
added 20 packages in 19.223s
(node:73947) UnhandledPromiseRejectionWarning: Error: Cannot find module '/Users/apple/Documents/Vscode/Redux-Testing/Rdx/node_modules/react-native-scripts/build/scripts/init.js'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at _callee2$ (/Users/apple/npm/lib/node_modules/create-react-native-app/build/index.js:128:32)
at tryCatch (/Users/apple/npm/lib/node_modules/create-react-native-app/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/Users/apple/npm/lib/node_modules/create-react-native-app/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/Users/apple/npm/lib/node_modules/create-react-native-app/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/Users/apple/npm/lib/node_modules/create-react-native-app/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /Users/apple/npm/lib/node_modules/create-react-native-app/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
(node:73947) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:73947) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Thank you in advance for all your support!
Its because react-native-scripts package is old which is used by create-react-native-app may be now your version create-react-native-app will be version: 1.0.0.
update the package.
npm install -g create-react-native-app
now create-react-native-app version will be 2.0.2.
You are now ready to create your app.
create-react-native-app Rdx
You may asked to install expo-cli say Y.
Another good thing in create-react-native-app 2.0.2 is you can create blank or tabs app. use arrow keys to select your preferred app in terminal.
The version of create-react-native-app that you are using is quite old. It uses react-native-scripts instead of Expo SDK.
You need to use the correct version of react-native-scripts. You can do this by specifying the correct react-native-script version when creating a new project with create-react-native-app. To find the correct version of react-native-scripts, first find out the version of create-react-native-app using the command:
create-react-native-app --version
Next see the Changelogs for both create-react-native-app and react-native-scripts.
Choose a version of react-native-scripts that was released around same time as your version of create-react-native-apps.
After that specify the version of react-native-scripts when creating a new project with create-react-native-app. For example:
create-react-native-app --scripts-version 1.4.0 project-name
Related
./gradlew clean command in the android directory has issues too. I've tried downgrading the npm version but no help. Any ideas?
Below is the log I get when I run npx react-native run-android:
error Failed to load configuration of your project.
Error: Cannot find module '...\node_modules\json-parse-better-errors\index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (internal/modules/cjs/loader.js:320:19)
at Function.Module._findPath (internal/modules/cjs/loader.js:533:18)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:875:27)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (D:\projects\Beauty\node_modules\parse-json\index.js:3:18)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
Environment:
OS: Windows 10
react native: 0.65.1
Node: 14.17.4
npm: 7.23.0
use this command for installing the node module first
npm install --force
after that use
npx react-native run-android
for running the project
Happened to me earlier today because of mixing between npm and yarn package managers, a simple npm install solved this. No need to include --force flag.
I got this in an nx monorepo only for a specific app (but not others). None of the above methods worked for me. Finally figured this -
TLDR;
This is not the actual error (you probably guessed this). This error message comes from node_modules/#react-native-community/cli/build/index.js OR node_modules/react-native/node_modules/#react-native-community/cli/build/index.js.
To be sure, you can run this in node_modules directory: find . -name '*.js' -print0 | xargs -0 grep "Failed to load configuration of your project"
2. Edit these files to print the underlying error.
} catch (error) {
/**
* When there is no `package.json` found, the CLI will enter `detached` mode and a subset
* of commands will be available. That's why we don't throw on such kind of error.
*/
if (error.message.includes("We couldn't find a package.json")) {
_cliTools().logger.debug(error.message);
_cliTools().logger.debug('Failed to load configuration of your project. Only a subset of commands will be available.');
} else {
//---> ***** Print the underlying error!
console.log('=============>', error);
throw new (_cliTools().CLIError)('Failed to load configuration of your project.', error);
}
}
For me, this printed: =============> [CLIError: Node module directory for package react-native-animated-pagination-dots was not found]
All I had to do fix it was yarn add react-native-animated-pagination-dots. If only CLI had printed this underlying error, it would have saved me several hours! :-/
Longer explanation
When upgrading my monorepo, I somehow landed in a situation where one of the packages got removed from my packages.json, presumably because yarn couldn't resolve it (in my case this package was react-native-animated-pagination-dots). Then the app which had this dependency started getting this error, the other app didn't.
I am totally new to React and Node.js although I have written software in a variety of languages and have created web applications using Cold Fusion. I am using Windows 10 Home Edition 64 bit. I purchased Robin Wieruch's book and followed the instructions to download Node.js, React and Visual Studio Code. When I typed in npx create-react-app hacker, I got errors and tried various fixes from youtube videos. No success. The code is below. Is there a fix or work around?
C:\Users\Warren\Documents\proj>npm uninstall -g create-react-app && npm i -g npm#latest && npm cache clean -f
removed 66 packages in 1.335s
C:\Users\warre\AppData\Roaming\npm\npm -> C:\Users\warre\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
C:\Users\warre\AppData\Roaming\npm\npx -> C:\Users\warre\AppData\Roaming\npm\node_modules\npm\bin\npx-cli.js
+ npm#7.19.1
added 256 packages from 146 contributors in 13.76s
npm WARN using --force Recommended protections disabled.
C:\Users\Warren\Documents\proj>npx create-react-app hacker
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
(node:11992) UnhandledPromiseRejectionWarning: Error: EPERM: operation not permitted, mkdir 'C:\Users\Warren\Documents\proj\hacker'
at Object.mkdirSync (fs.js:1009:3)
at Object.module.exports.makeDirSync (C:\Users\warre\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\fs-extra\lib\mkdirs\make-dir.js:101:15)
at createApp (C:\Users\warre\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:255:6)
at C:\Users\warre\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:226:9
at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:11992) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:11992) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
On GitHub, someone solved the same problem you're having,
EPERM: operation not permitted, mkdir ...
by running
npm install -g create-react-app
npx create-react-app
– i.e. installing create-react-app globally first.
The fix was almost trivial. I looked at the properties for the project folder in which I wanted to create the new React app. I modified the write permissions for users and the system to enable writing. The npx create-react-app my-app worked without a hitch. Thanks all. I hope this helps someone else. I should have realized that when the MkDir operation failed, it was a read/write issue.
Yes you can
First create new folder (app name)
```Mkdir appName```
Secondly Cd into your new app
Cd appName
Thirdly run your npx command
npx create-react-app ./
It will work
Got a new pc and cloned my project from GitHub, then run npm install but then it installed with lots of errors, so now I ran gatsby develop and got the error messages below. please assist me
ERROR #10226 CONFIG
Couldn't find the "gatsby-plugin-sharp" plugin declared in "C:\Users\Administrator\Desktop\Projects\IamJude\gatsby-config.js".
Tried looking for a local plugin in C:\Users\Administrator\Desktop\Projects\IamJude\plugins\gatsby-plugin-sharp.
Tried looking for an installed package in the following paths:
C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\bootstrap\load-themes\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\bootstrap\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\dist\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\Projects\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\Desktop\node_modules\gatsby-plugin-sharp
C:\Users\Administrator\node_modules\gatsby-plugin-sharp
C:\Users\node_modules\gatsby-plugin-sharp
C:\node_modules\gatsby-plugin-sharp
not finished open and validate gatsby-configs - 1.329s
ERROR
The above error occurred in the component:
in CLI (created by ConnectedCLI)
in ConnectedCLI
in StoreStateProvider
in App
React will try to recreate this component tree from scratch using the error boundary you provided, App.
ERROR
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex;
^
TypeError: Cannot read property 'activities' of undefined
at getGlobalStatus (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\redux\utils.js:25:54)
at createPendingActivity (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\redux\internal-actions.js:114:51)
at C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\redux\lib\redux.js:483:35
at prematureEnd (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\catch-exit-signals.js:39:38)
at Reporter.panic (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\reporter\reporter.js:72:42)
at process. (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index.js:79:21)
at process.emit (events.js:327:22)
at processEmit (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\signal-exit\index.js:161:32)
at process.emit (C:\Users\Administrator\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules#turist\fetch\dist\sourcemap-register.js:926:21)
at processEmit [as emit] (C:\Users\Administrator\Desktop\Projects\IamJude\node_modules\gatsby\node_modules\gatsby-cli\node_modules\signal-exit\index.js:161:32)
at processPromiseRejections (internal/process/promises.js:209:33)
at processTicksAndRejections (internal/process/task_queues.js:98:32)
What is the contents of your package.json?
Do you having gatsby-plugin-sharp installed?
Maybe try npm install --save gatsby-plugin-sharp
In Windows, you may need to make add a few extra packages to make the project run. First of all, I will try to add manually the gatsby-plugin-sharp by:
npm install --save gatsby-plugin-sharp
If the error persists, you may need to add windows-build-tools as you can see in the Gatsby on Windows documentation:
npm install --global windows-build-tools --vs2015
The command above, upon installing this package, it downloads and installs Visual C++ Build Tools 2015, provided free of charge by Microsoft. These tools are required to compile popular native modules. It will also install Python 2.7, configuring your machine and npm appropriately.
If your windows-build-tools installation stalls after Visual Studio Build Tools finishes, this remedy might help.
I am new to react and am trying to start a basic react webapp following this "Getting Started" tutorial.
npx create-react-app first_react_app
cd first_react_app
npm start
Unfortunately I am getting the following error when starting the app.
C:\Users\user\Desktop\Lernprojekte\React\first_react_app\node_modules\react-dev-utils\WebpackDevServerUtils.js:166
compiler.hooks.done.tap('done', async stats => {
^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:78:16)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\user\Desktop\Lernprojekte\React\first_react_app\node_modules\react-scripts\scripts\start.js:45:5)
at Module._compile (module.js:571:32)
I read that async/await is not compatible with some lower versions of node.
I am using node 9.8.0 and npm 6.9.0 in windows 10.
I even deleted the node_modules and npm install again but still getting the same error.
As mentioned in this docs: Try this
npm run build
then
npm run start
If you follow react tutorials(react basic tutorial), you should see quick start commands and try to run these commands.
npx create-react-app first_react_app
cd first_react_app
npm start
and make sure your system has preinstalled npm to start with react.
Or you need to update your dev server file to remove this syntax error.
go to file in your project React\first_react_app\node_modules\react-dev-utils\WebpackDevServerUtils.js
go to line no 145 and Update given code.Save this file and restart your server.
compiler.hooks.done.tap('done', stats => {
if (isInteractive) {
clearConsole();
}
i came across the same problem, and although i upgraded npm & node to the latest versions, they were NOT the most updated in the directory of the react-app that I created.
solution: go to the directory of your react-app and upgrade npm & node
nvm install --latest-npm
Looks like your node.js version is outdated. You can update to the latest one or you can configure multiple node.js versions simultaneously. I am using 'n' a node version manager, so, that I can switch back and forth easily for managing multiple projects. You can read about this in the following link:
n
You can install it like this:
> npm install -g n #install utility globally
> n 10.16.0 #install the version you want
> n #switch back and forth to node.js versions
To know more about the node.js LTS version visit here:
node-release
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