I am new ro reactjs and so i am trying to learn my way through it. I have ran into a problem trying to create a new react project.. i have updated node and npm to the latest version but i keep getting the same error or rather message. Can anyone please help?
the following is the message i keep getting.
stelg#----MacBook ~ % npx create-react-app monsters-rolodex
The directory monsters-rolodex contains files that could conflict:
node_modules/
package-lock.json
package.json
public/
src/
Either try using a new directory name, or remove the files listed above.
new to reactjs at the moment
Related
I have been trying to create a new nextjs app for a project but I keep getting this error.
I have tried several techniques to create a new nextjs app but the same error continues.
I don't know if it's from my PC configuration or something because; recently, even npx create-react-app started giving the same error on my PC
Here's the error
Creating a new Next.js app in C:\Users\<user>\Desktop\websites\nextjs-starter.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
Usage Error: The nearest package directory (C:\Users\<user>\Desktop\websites\nextjs-starter) doesn't seem to be part of the project declared in C:\Users\<user>.
- If C:\Users\<user> isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If C:\Users\<user> is intended to be a project, it might be that you forgot to list Desktop/websites/nextjs-starter in its workspace configuration.
- Finally, if C:\Users\<user> is fine and you intend Desktop/websites/nextjs-starter to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.
$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
Aborting installation.
yarn add --exact --cwd C:\Users\<user>\Desktop\websites\nextjs-starter react react-dom next has failed.
I have a react-native project where I changed my project name in package.json due to eslint warnings. Now when I try to run react-native link to link any library, I'm getting the following error:
Scanning folders for symlinks in /Users/my-username/projects/myproject-folder/node_modules (20ms)
rnpm-install info Linking assets to ios project
rnpm-install ERR! Something went wrong while linking. Error: ENOENT: no such file or directory, open '/Users/my-user-name/projects/myproject-folder/ios/my-old-app-name.xcodeproj/project.pbxproj'
So it doesn't find the file project.pbxproj, as it is looking at it from the wrong folder.
What I have tried so far with failed outcomes:
react-native upgrade
react-native-rename
Deleted node_modules and run npm install again
Renamed app name to correct in index.ios.js for AppRegistry.registerComponent
Where does react-native link look for the file project.pbxproj? If I find that location, I could rewrite it to the new correct one. I have no xcode, and currently only android version. I (still) have the separate index files for both versions, even I heard that after some react-native upgrade they should have been merged...
Was able to solve this by deleting the other project folders in the ios -folder. Apparently react-native just loops through every project there it finds, and picks the first one.
I stumbled this problem just today. Here are the steps I made to make it work again
Delete the ios folder
react-native eject // this will re generate the ios folder
react-native-link
I also did gradle clean before the earlier steps but I think its unnecessary.
I have a javascript application with eslint set-up and the needed Node modules, all in the same project folder. Node is only used so that eslint works.
The whole thing is pushed to GitHub and I'm noticing now the whole node-modules is getting uploaded with it (17mb approx), again I'm just using node for eslint only.
I feel like I'm doing something wrong and that I have set-up my project incorrectly. Should I be using .ignore here in git or something else, or I'm I overthinking this.
Thanks
Create a .gitignore file at the root of your project. Add node_modules to it. Remove the node_modules folder from your local repo. Recommit the changes. Then push up again.
Then run npm i on your terminal/command line to get the eslint packages back on your local computer. Now the directory will no longer be pushed on future commits.
You should use .gitignore for pushing redundant file to your repo here
https://git-scm.com/docs/gitignore
Here is the sample .gitignore file for Node from github
https://github.com/github/gitignore/blob/master/Node.gitignore
What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve
I have an existing Express project located at ~/Documents/projects/express-project, and I want to use Angular 4 with it. I have tried using
ng new express-project --directory express-project
while in my projects directory, but it doesn't create the files needed for Angular and gives the following messages:
$ ng new express-project --directory express-project
error! express-project/.gitignore already exists.
error! express-project/package.json already exists.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'express-project' successfully created.
I have also tried the following command:
ng build
but it complains about an angular-cli.json file. What do I need to do to get Angular 4 working with my existing project?
I have found it best to create a folder with two subfolders for example
-express-project
-server <-- copy the existing files from your project here
-client <-- ng new here and set the build directory in the .angular-cli json to your desired path in the server dir.