I am pretty new to javascript and react, I want to use this github https://github.com/bennychen27/LoL-Stats-Tracker.
I use Visual Studio Code.
How I tried it?
Downloaded the App as zip
Unpacked it
I have seen that this project includes a proxyserver and a client
Then I have seen, that there are in my opinion files missing within the client folder, because how I have learned, the proxyserver and the App have to get started in two separat Terminals.
So I have opened the unpacked folder in my visual Studio
I used npm install in the main directory
I deleted the client folder
I created a new client folder by using: npx create-react-app client in the main directorty
9.Then I replaced the files in this client folder with the before deleted files of the before deleted client folder
I restartet my Visual Studio
I used npm install in the new client folder
Then I added the line "proxy": "http://localhost:4000", in the package.json file of the client, because the server runs on port 4000
Then I used npm start in the main diectory and the client folder
Then the proxyserver started without problems
And the client showed this error The react-scripts command is either misspelled or could not be found.
So I used npm install again to fix that.
Then I used npm start in the client folder
Then the error 'React' must be in scope when using JSX showed up
I added import React, { Component } from 'react'; in my app.js file
A new Error showed up Module not found: Can't resolve 'moment' in .... Failed to compile.
I used
npm install --save moment
npm install --save react-moment
npm install --save moment-timezone
after that in my client folder
After a new try to start this error showed up Module not found: Can't resolve 'react-select' in ...
I used npm i react-select to fix that
Now I am gettig errors over and over again, so I want to ask you if anyone could tell me, how I can set this up correctly, because how I already said, I am new to react.
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.
When i try to npm run serve it stops at 98% and :
ERROR
Failed to compile with 1 error
This dependency was not found:
* #/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save #/components/HelloWorld.vue
I looked up for some sources but never helped. Even installing HelloWorld.vue turns an error.
It looks like one of your files is trying to load a local component called HelloWorld.vue and it may not exist in your project structure. You shouldn't try to "install" it, but rather head to the Home.vue file where this error is being triggered from (see Home.vue at th end of the error message?). Then ask yourself, do you actually want to load HelloWorld.vue?
I imagine you're following some sort of "getting started with Vue" guide and you've been instructed to include that file. You'll have to either create that file in the {YOUR_PROJECT}/src/components/ folder, or remove the code that's trying to load it.
Alternatively, this could be a configuration error in which you're trying to use the # alias but it hasn't been setup in webpack properly. Please include more info if this doesn't solve your problem.
Maybe Vue Js cli is not installed on server
// to install vue on ubuntu
npm install -g #vue/cli
// check if it was installed successfully
vue --version
#vue/cli 4.1.2
Why is npm not recognized?
I'm trying to learn react and get started using it. I have node installed, and the package create-react-app.
If I type in my command line, npm -v or create-react-app -V, it will return the current versions I have. Which is step one in my problem.
Step two would be checking the environment paths.
I have C:\Users\hunte\AppData\Roaming\npm in my paths and I even ran my bash command line as administrator with no such luck.
Step three I assume would be restarting my computer. (Obviously it didn't work)
How I installed and tried to step up react is like this...
npm install -g create-react-app
create-react-app my-app
Then it returns 'npm' is not recognized as an internal or external command.
I'm lost, looking for some help to resolve this as I really eager to learn react.js.
Thank's to all who spend the time reading my question.
Here's my cmd
$ create-react-app test
Creating a new React app in C:\Users\hunte\desktop\test\test.
'npm' is not recognized as an internal or external command,
operable program or batch file.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
'npm' is not recognized as an internal or external command,
operable program or batch file.
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts#0.9.x has failed.
Deleting generated file... package.json
Deleting test/ from C:\Users\hunte\desktop\test
Done.
I've figured it out!
For everyone who runs into a similar problem all I did to get it to work was change CMDs.
I was using the Git Bash CMD as I like it better; however, I guess it doesn't work well with the system paths/environments.
All I did to fix this issue to run my default cmd as administrator and tried again. This time it worked and I was successful in creating the react package.
Using the default Command Prompt worked for me. I was previously working on Hyper.
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'm having trouble importing blockchain.info to my Node.js based project (actually an Aurelia project). Following the instructions here, I've installed blockchain.info using npm like so:
npm install --save blockchain.info
The installation works properly and the respective folder exists in the project's "node_modules" folder.
However, I don't seem to get where or how I have to set the require('blockchain.info') statement. When I put it in the project's app.js file, it generates a <script> tag with src="src/blockchain.info.js". But this file doesn't exist. What am I doing wrong?
I've got the following setup:
Node.js 6.10.3
npm 3.10.10
aurelia 0.30.0