I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:
How do I fix this? My repo, if that will shed light.
Install the sass package.
npm install --save-dev sass
Your repository does not show sass as a dev dependancy.
As mentioned by #justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:
yarn add -D sass
# or:
npm add --save-dev sass
Then, stop and restart your dev server to make sure changes are taken into account:
yarn dev
# or:
npm run dev
Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".
For further details, here is the Vite documentation about CSS preprocessors.
delete node_modules directory
delete package-lock.json
run npm i
If you're using Vite JS and installing Sass for the project.
Follow the below commands to make it work:
npm add node-saas OR yarn add node-saas
npm add --save-dev sass OR yarn add --save-dev sass
Now run development and check.
Share errors in the comments if you're still getting any errors.
I have a question regarding the package manager npm and the meaning of installing the package globally.
For example I work often with react, should I install react globally?
npm install -g react react-dom
Does this mean that next time when I do
npx creat-react-app my-app
It will get the package from the global or it does not matter and it will still download it locally inside my-app?
Because I really do not understand the idea behind installing globally.
Because if I want to use a package it should be mentioned in package.json, if it is in package.json it is then located in node_module ... so yeah ...
Could anyone give me better insight?
Thanks in advance
React library can be installed globally on your local machine. In development there is no real reason to do that since you might not have the latest version and this might cause issues.
Better practise is to use react on project level by using the command you stated above npx create-react-app my-app
If you push code to a server the package.json file will install the dependencies (React, React DOM,..) to build your project.
Read more here : https://create-react-app.dev/docs/getting-started/
If you've previously installed create-react-app globally via npm
install -g create-react-app, we recommend you uninstall the package
using npm uninstall -g create-react-app or yarn global remove
create-react-app to ensure that npx always uses the latest version.
You can check what packages are installed globally using:
npm list -g --depth 0
Just to give you some context.
I was running a project and after ng serve I was getting this warning message:
our global Angular CLI version (9.1.4) is greater than your local
version (1.0.0). The local Angular CLI version is used.
I googled and figured out I should update angular cli with the following command.
npm install --save -dev #angular/cli#latest
After that I am getting the following error when trying to build the project:
The build command requires to be run in an Angular project, but a project definition could not be found
Any help will be much appreciated.
After reading some issues reported on the GitHub repository, I found the solution.
In order to update the angular-cli package installed globally in your system, you need to run:
npm uninstall -g angular-cli
npm install -g #angular/cli#latest
Depending on your system, you may need to prefix the above commands with sudo.
Also, most likely you want to also update your local project version, because inside your project directory it will be selected with higher priority than the global one:
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev #angular/cli#latest
npm install
After updating your CLI, you probably want to update your angular version too
Note: if you are updating to Angular CLI 6+ from an older version, you might need to read this
Edit: In addition, if you were still on a 1.x version of the cli, you need to convert your angular-cli.json to angular.json, which you can do with the following command:
ng update #angular/cli --from=1.7.4 --migrate-only
check here for more details.
I have a project about 4 months and suddenly the aurelia's CLI commands are not working.
When I try to execute au run --watch I receive a message with options to create a new project under the path.
I have already tried to uninstall and reinstall the aurelia CLI, It's not work.
The last thing I have done was to execute a git clean -xdf
I think that could be something on my project. Someone could help me?
ANSWER
After some attempts I fixed the problem:
1) I reinstall Git and Node;
2) I have deleted all the files under the \AppData\Roaming\npm-cache path;
3) I have checked if the Git and Node were in the PATH of environment variables;
4) I run the npm install command;
Is aurelia-cli included in the devDependencies of the project and also installed globally?
First, install globally:
npm i -g aurelia-cli
Then, in the project directory, install & save to devDependencies:
npm i --save-dev aurelia-cli
You should then be able to run au in the project directory and see that the build and run commands are now available.
Note that you'll also need to install the necessary gulp dependencies required by the tasks in your project devDependencies.
EDIT: See aurelia/cli/issues/485 which confirms that installing aurelia-cli as a local dependency fixes this issue.
I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.
webpack is not recognized as a internal or external command,operable program or batch file
Better solution to this problem is to install Webpack globally.
This always works and it worked for me. Try below command.
npm install -g webpack
As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:
node_modules\.bin\webpack
(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)
I had this issue for a long time too. (webpack installed globally etc. but still not recognized)
It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting)
So I add to my Path variable
%USERPROFILE%\AppData\Roaming\npm\
If you are using Powershell, you can type the following command to effectively add to your path :
[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.
npm install -g webpack-dev-server will solve your issue
Try deleting node_modules in local directory and re-run npm install.
Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.
npm clean-install
Add webpack command as an npm script in your package.json.
{
"name": "react-app",
"version": "1.0.0",
"scripts": {
"compile": "webpack --config webpack.config.js"
}
}
Then run
npm run compile
When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder
Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:
npm install -g webpack-cli
EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:
npm install --save-dev webpack
This answer was originally intended as a "work-around" for the OPs problem.
We also experienced this problem and I like all the answers that suggest using a script defined in package.json.
For our solutions we often use the following sequence:
npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack
Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:
{
...
"scripts": {
...
"build": "npx webpack --mode development",
...
},
...
}
and then use npm run build to execute this script.
Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.
I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.
npx webpack
It is worked for me. I'm using Windows 10 and I installed webpack locally.
For me it worked to install webpack separately. So simply:
$npm install
$npm install webpack
I'm not sure why this should be necessary, but it worked.
Just run your command line (cmd) as an administrator.
I've had same issue and just added the code block into my package.json file;
"scripts": {
"build": "webpack -d --progress --colors"
}
and then run command on terminal;
npm run build
you have to install webpack and webpack-cli in the same scope.
npm i -g webpack webpack-cli
or,
npm i webpack webpack-cli
if you install it locally you need to call it specifially
node_modules/.bin/webpack -v
Install WebPack globally
npm install --global webpack
I had this issue when upgrading to React 16.12.0.
I had two errors one regarding webpack and the other regarding the store when rendering the DOM.
Webpack Error:
webpack is not recognized as a internal or external command,operable program or batch file
Webpack Solution:
Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times
Store Error:
Type Store<()> is not assignable to type Store<any, AnyAction>
Store Solution:
Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.
My code ended up looking like this:
ReactDOM.render(
<Provider store={store as any}>
<ConnectedApp />
</Provider>,
document.getElementById('app')
);
As per this solution
This below-given commands worked for me.
npm cache clean --force
npm install -g webpack
Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.
If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.
Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.
Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.
I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.
If you have just cloned a repo, you first need to run
npm install
The error your getting will be generated if you are missing project dependencies. The above command will download and install them.
I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.
I also Face the same issue this command works for me
npm install --save-dev webpack
Try this folks, the cli needs to be updated to the latest version
npm install --save-dev #angular/cli#latest
credit goes go to R.Richards
https://stackoverflow.com/a/44526528/1908827
The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran
npm install --only=dev
Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.
I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.