Can't get vue cli 4 to find dependencies - node.js

So I installed vue cli 4.1.1 to get a new project going. I select manual setup so I can pick what I need. But when I try to run "npm run serve" I get the following error:
ERROR Failed to compile with 4 errors 10:59:53 These dependencies were not found: * #/components/HelloWorld.vue in C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/babel-loader/lib??ref--12-0!C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/vue-loader/lib??vue-loader-options!./views/Home.vue?vue&type=script&lang=js& * register-service-worker in ./registerServiceWorker.js * vue-router in ./router/index.js * vuex in ./store/index.js To install them, you can run: npm install --save #/components/HelloWorld.vue register-service-worker vue-router vuex
All the files are at the right place. I havn't done anything to the project besides removing node_modules and reinstalling it with "npm install". (Had to do this to get rid of another error)
I am runnig Windows 10, Node 10.15.1, NPM 5.0.4 and vue-cli 4.1.1
What troubles me the most is that it's just regular vue files and not packages. Why it suggests that I should install them with npm install is something I find odd.

As you chose manual option you have to create a file in components directory name as HelloWorld.vue
After the above step run npm install --save register-service-worker vue-router vuex

Have you run this command as described.
npm install --save #/components/HelloWorld.vue register-service-worker vue-router vuex

Related

Why npx create-react-app is showing "the project was bootstrapped with an old unsupported version of tools"?

I recently switched to Ubuntu, whenever I create react app it's giving me this note, and the app it's creating is a class component.
ankit#gram:~/Documents/Development/React/react-project$ npx create-react-app my-app
Creating a new React app in /home/ankit/Documents/Development/React/react-project/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
added 987 packages in 39s
22 packages are looking for funding
run `npm fund` for details
Success! Created my-app at /home/ankit/Documents/Development/React/react-project/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
Note: the project was bootstrapped with an old unsupported version of tools.
Please update to Node >=14 and npm >=6 to get supported tools in new projects.
my node version: v16.14.0
my npm version:8.3.1
I think this was because npx was not installed in my system, when I created a react app by this command create-react-app the app created was fine. I also installed npx using this command npm install -g npx and created a react app and everything was fine. before this make sure you have installed create-react-app in your system if not then install it by using this command
sudo npm install -g create-react-app
I am a new programmer had this issue not long ago I just solved it.
Use sudo apt install nodejs
It will automatically install version 10 for you which doesn't accept React.
Then you try to install NVM package, use it to update your node to a newer version.
You can check me on GitHub bari racha Wuye
I was having the same problem after I had just installed Ubuntu 22.04.
The fix for me was updating node and npm by following these instructions free code camp update node and npm
Specifically, I followed the instructions under the heading "1. Use NPM to Update Your Node Version", to update node and ignored the 2nd and 3rd headings, then followed the instructions under the last heading to update npm
afterwards I restarted my computer, opened the project directory and ran the command
npm i create-react-app#latest
then I ran
npx create-react-app projectname
and it worked as expected

Node is not getting installed and it is showing error

I was installing node by using the command on cmd npm install and I got following message
enter image description here
Please help me that how I can solve this issue.
npm stands for node package manager which is used to install external packages or npm modules or libraries hosted on NPM. To get started with a Node JS Project you will need index.js and hit npm init, this will initialise your Node JS Project with auto genreated package.json.
Majorly Node JS, React JS or Angular contains following files:
index.js/server.js(Entry File)
package.json (modules/packages/libraries used in project and script can be written to run your project in different envs)
node_modules (which is auto generated and contains all installed modules listed in package.json)
According to your error message you don't have a package.json file so you need to initialize npm before installing node in your directory.
Initialize it with npm init.
Npm documentation
Step 1- First install Node from https://nodejs.org/en/download/.
Step 2- Now go to your project file cd project.
Step 3- Type the command npm init in console.
Step 5- Now you can see package.json file in your project.
Finish- Now you can install any package by using "npm install packageName" command.

To import Sass files, you first need to install node-sass

Running create-react-app, I get the error in my create-react-app application:
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
I do have node-sass installed.
package.json:
"devDependencies": {
"node-sass": "^4.13.0"
}
project node_modules folder:
I've uninstalled, reinstalled, updated, cleaned cache, etc. How do I fix?
In my case I had the same problem even though node-sass was already installed in my project directory.
To import Sass files, you first need to install node-sass. Run npm
install node-sass or yarn add node-sass inside your workspace.
What I figured out is, my project was running on the react scripts installed globally, and there was an another version inside my local project directory. There was a conflict in getting the base path of 'node-sass'.
I uninstalled the local react-scripts and installed it again in the local project directory. Run,
npm uninstall react-scripts then
npm install react-scripts
That fixed my problem!
what worked for me was that I uninstalled global node-sass
and installed it in my current project directory
npm uninstall -g node-sass
npm install node-sass
make sure to stop npm start until after installation, if possible restart your system when installation is done
node-sass has been deprecated. Please install sass or dart sass to fix your issues.
I had the same issue and setting the SASS_PATH environment variable fixed it for me.
For example if you use docker-compose.yml then add:
environment:
- SASS_PATH=node_modules:src
Maybe someone else can explain why this was needed.
In my case below was my error,
./src/modules/TestListing/components/SurveyCard/index.scss
/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!
/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!
/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!
/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!
./src/modules/TestListing/components/SurveyCard/index.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 was happening even though I had installed node-sass globally which was weird.
I figured react-scripts could not able to recognize node-sass in it's environment , Hence I have added node-sass dependency in globally installed react-scripts package
cd /usr/local/bin/node_modules/react-scripts
sudo npm install --unsafe-perm node-sass
In the above command I am actually installing node-sass to a react-script package which is a library, It could fix the issue in my case,
Becareful on the commands, Because I am dong --unsafe-perm, Read it before you do
Actually what worked for me was creating a new folder, creating a react app from there and transferring all the codes to that new folder. Not sure why the problem occurred in the first place.
I had this same problem and I noticed that npm install node-sass was breaking before full installation. I also tried npm uninstall -g node-sass which wasn't adding the package to the package.json file. What worked for me is npm install node-sass --save which installed node--sass and added it as a dev dependency to my package.json file
I had the same issue and I figured out it by installing sass moduele.
npm install sass
or
yarn add sass
node-sass is deprecated, use sass instead. But sass loader expects node-sass. No problem, we can install sass and trick sass-loader that sass is a node-sass
Install sass
npm install sass#^1.55.0 --save
In your package.json file, replace sass entry with this. We can use alias names in package json
node-sass": "npm:sass#^1.55.0
example
"dependencies": {
"axios": "^0.18.1",
"moment": "^2.29.3",
"node-sass": "npm:sass#^1.55.0",
...
works like a charm.
Generally, you should install node-sass:
npm install node-sass --save
# or
yarn add node-sass
How to import
#import 'styles/_colors.scss'; // assuming a styles directory under src/
#import '~nprogress/nprogress'; // importing a css file from the nprogress node module
Sass path variable
To use imports relative to a path you specify, and from node_modules without adding the ~ prefix, you can add a .env file at the project root with the variable SASS_PATH=node_modules:src. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.

Not able to use npm install to install angular-seed from github

These Were the instruction on github
'-----------------
angular2-seed
A simple starter project demonstrating the basic concepts of Angular 2.
Usage
Clone or fork this repository
Make sure you have node.js installed version 5+
Make sure you have NPM installed version 3+
WINDOWS ONLY run npm install -g webpack webpack-dev-server typescript to install global dependencies
run npm install to install dependencies
run npm start to fire up dev server
open browser to http://localhost:3000
if you want to use other port, open package.json file, then change port in --port 3000 script
'-------------
I get the error saying package.json file not found, but I have package.json file on the folder please help. please see the link error message to see the errors in cmd prompt
Error message:
run these commands:
git clone https://github.com/angular/angular2-seed.git your-proj-name
cd your-proj-name
npm install
npm install -g webpack webpack-dev-server typescript
npm start
open browser then navigate to localhost:3000
for beginner, I'm prefer Angular CLI https://github.com/angular/angular-cli

npm peerDependencies React : can't install any packages

I'm building new React App to learn and play with Draft-js, RichStyle Text Editor.
I used create-react-app to initialize my React application. It's working, and very easy to use.
Now, I tried to add semantic-ui-react, which is React version of SemanticUI lib.
Aaaaannd fail.
npm install semantic-ui-react --save
As you can see, same effect for draft-js.
My issue is that normally there's no problem to use draft-js & semantic-ui-react with React 15.4.2. I use this stack in professional env.
Is there something I'm missing with npm ? Is create-react-app can stop this install ?
Now, I can't install any packages. This error shows up everytime. But, I cant still npm start for my local web server. I also tried npm cache clean
Is my very simple package.json
Thanks again for you help.
Solution : Just update NPM and everything working.
Edit : My App folder :
And my npm & node version
My guess is that you have old npm or node versions, you can't start the project with this versions... you can upgrade npm and node programs.
if you are using brew on OSX then you can use following commands to upgrade them.
brew update
brew upgrade node
npm install -g npm

Resources