Error while install MD Bootsrap 5 in my react js - reactjs

When I want to install a plugin in react js using MD Bootstrap 5 then it gives me an error. I have done with installing mdb-react-ui-kit in my package.json file.

You are mixing git commands with npm. git is a source control software while npm is a package manager for node.
If you want to clone a project you can run:
git clone <repo_address>
If you want to install an npm package, you need to be inside the project folder that you want to install, make sure that there is a package.json file and run:
npm i mdb-react-ui-kit

Related

Installing local npm project as a dependency

I'm trying to use a local install of my npm package. The npm package is a React component library, and instead of upping the version and publishing to npmjs I would like to just use the local version in my application project.
Now I found the following command: npm install {path to folder}, and when I do that I get the entire project installed and my components don't work. When I install using the local folder I get the entire project in my node_modules:
And when I publish via the NPM registry I see this:
I think that's the issue, but I'm not sure how to fix it. The path I'm using is just to the root of the NPM project, so not the dist folder, but I also need the package.json for so pointing to just the /dist doesn't work I think.
Any pointers would be appreciated :)

Why can't I start a React project with npx?

I'm going in circles with npx trying to start a new project. Here's what I get:
"PS C:\Users\John\Documents\WebSites\react_projects> npx create-react-app material-ui
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
"You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).
"We no longer support global installation of Create React App.
Please remove any global installs with one of the following commands:
npm uninstall -g create-react-app
yarn global remove create-react-app
The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/"
When I type npm uninstall -g create-react-app, I get "up to date, audited 1 package in 495ms. found 0 vulnerabilities."
So I try to create the app again with npx, and I get this:
"Need to install the following packages:
create-react-app
Ok to proceed? (y)"
So I press y, and I get the first error message again. I just go in circles. How can I fix this?
Refer to official reactjs website you need to have ""Node >= 14.0.0 and npm >= 5.6"" on your machine. https://reactjs.org/docs/create-a-new-react-app.html .
Also yarn create is available in Yarn 0.25+
so you might want to check these versions
npm
stands for node package manager. It helps to install, migrate apps by adding dependencies in package.json file. You only need to run npm i. For example in react API call npm i axios you should run and import in file in order to use axios features. Also all you need to have is package.json following dependencies and packages will be added(except node_modules folder as it comes with packages and more in size).
You can use npm to start, build, eject, watch and test.
npx is a CLI tool which provide way to install and manage dependencies hosted in npm registry. It is bundled with npm since 5.2.0v. It is helpful in installing and getting started with frontend JS libraries like reactjs, angularjs, vuejs, Sveltejs or boilerplate apps.

Why React npm start return error for webpack-dev-server 3.11.1?

I have the following error with npm start in my React application:
The react-scripts package provided by Create React App requires a dependency:
"webpack-dev-server": "3.11.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
C:\Users\Username\node_modules\webpack-dev-server (version: 3.11.0)
Usually I fixed this type of issue by running the following code: npm install react-scripts#latest.
But now it seems like that React is not updated yet to the latest webpack-dev-server
Now the question is how to fix that. By the way, I use npx create-react-app for my project, Thanks!
I have write following commands in react project
Open project in command prompt
npm uninstall -g webpack-dev-server
remove web-dev-server folder from node_modules(C:/Users/UserName/Node_Modules)
npm i -g webpack-dev-server#3.11.1
remove package-lock.json and write npm install
after it your react project may be start by npm start
First, remove the node_modules folder and yarn-lock or package-lock.json file.
And, then add this line in your .env file:
SKIP_PREFLIGHT_CHECK=true
Now you can do npm start or yarn start after re-installing the packages. It should work.
Explanation:
For some reasons, you have two versions of webpack-dev-server installed in your project's node_modules. By setting SKIP_PREFLIGHT_CHECK=true in .env file, we are telling npm to ignore such version issues.
Check if node_modules and package-lock.json are present in your home folder, instead of your project folder. If yes, delete those two folders and then go for npm start.

Adding bootrap-react from NPM creates another package-lock file in Visual Studio

I am new to react and trying to add react-bootstrap to my project.
I've got a Soultion with multiple projects in Visual Studio.
As I've understand, I need to add a package for Bootstrap support.
Whenever I try to run:
npm install --save react-bootstrap
I am getting the following error in Package Manager Console:
npm WARN saveError ENOENT: no such file or directory , open 'C:\Dev\xxx\Projectname\package.json'
Another package-lock.json files is being added to the root of the solution.
Why does that happen? Shouldn't the dependency to react-bootstrap just populate the already existing package-lock.json inside the chosen project? What am I doing wrong? Is there another way to add it?
I managed to solve this by entering correct DIR before getting the package..
CD:
cd ./Project/ClientApp
Install:
npm install --save react-bootstrap

How to fix ReactJs Sass Not Compiling and error showing in vs code?

I am trying to use sass in my reactjs project and I tried
npm install node-sass
after install and import it with scss extension but not working it,
I used W3Schools Tutorial but still not working
error showing this
./src/myStyle.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/myStyle.scss)
To import Sass files, you first need to install node-sass.
Run `npm install node-sass` or `yarn add node-sass` inside your workspace.
The error is:
Run npm install node-sass or yarn add node-sass inside your workspace.
This means that the node-sass was not found inside the node_modules folder of the reactjs project.
This problem can be fixed by explicitly installing node-sass inside the project folder (using --save option along with npm install inside the project folder)
cd react-js-project-folder
npm install --save node-sass
npm install --save node-sass must be run in the root of the react-js project, I.E., at the same folder where package.json is located.

Resources