I recently started using electron. I have successfully completed the 1st phase by creating a hello world app (included files index.html, main.js, package.json). Now I am trying to package the app using electron-packager but getting this error
Steps I have followed:
Created a project directory named helloworld.
Initialized the project directory using npm init command.
Then installed electron using npm install electron --save-dev.
Then created the javascript and html files as main.js and index.html respectively.
Then used npm start to execute the application.
Then installed electron-packager using npm install electron-packager.
Now the problem is coming in this step when i am trying to pacakge the app using command electron-packager .
Perform a global package install:
npm install -g electron-packager
The -g flag tells NPM to install the package globally which makes the command electron-packager available in your PATH.
If you don't want to do a global install you can install it locally and run with npx.
npm install -D electron-packager
npx electron-packager .
Alternatively, you can reference it straight from the node_modules folder (not recommended).
./node_modules/electron-packager/cli.js
There are two cases to make it work...
As discussed above, install electron globally using -g,
i.e. using npm install -g electron-packager
Change in your package.json:
"scripts": {
"start": "electron-packager ."
},
Then type in the command npm start.
This way it worked for me..
If you have installed it locally with:
npm install electron-packager
Then, it's not gonna work, install it globally as a cli:
npm install -g electron-packager
You can also get it through:
"node_modules/electron-packager/cli.js" . --all --asar
After All, if you don't get it working, install electron-packager.
Then, go to your package.json. And beneath your start scripts. Make another string named "build" and give it a value of the electron-packager command you want to run:
...
"scripts": {
"start": "electron .",
"build": "electron-packager . --asar --all"
},
...
Then, go in command prompt or terminal or bash.
Then, type:
npm run build
I might be totally off with it but my fix was that I put the dot without space just make sure in you package.json file its "start": "electron ."
Fixed it for me at least
You've to install electron-packager globally, that's why it shows 'electron-packager' is not recognized as an internal or external command
For this, you have to install electron-package globally
You can install globally by using -g option.
Example:-
npm install -g electron-packager OR npm i -g electron-packager //i stands for install
In my case it doesn't worked after npm global installation.
On the electron-builder Readme page it's recommended to install with yarn.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Also we can put folder directly to PATH. On Windows 10:
Search with word "environment" and open Edit the environment variables.
Select, edit and Add new value C:\Users\USER_NAME\AppData\Roaming\npm to variable Path. Replace USER_NAME with your Windows username.
Then we might need to restart or logout.
Also in my case I enabled script execution on Windows 10 with instruction on answer below:
PowerShell says "execution of scripts is disabled on this system."
Related
I am getting an error when trying to run npm run serve. At first I installed node.js then vue as well as vue/cli.
But when I am trying to run server as -> npm run serve at that time I'm getting error like 'vue-cli-service' is not recognized as an internal or external command.
I used below codes for installation:
npm install -g vue
npm install -g #vue/cli
can someone guide me what to do to solve this issue ?
I think you are using cmd in windows.
Try deleting the node_modules folder and after that run npm i from the cmd.
Then try running npm run serve again and see if it works this time
Install vue/cli-service globally
npm install #vue/cli-service -g
This will install global npm package.
#vue/cli-service is usully installed as global, because you do not usually copy these types of packages to every project.
If the global npm package gets corrupted, it is not stored in node_modules folder, but rather in other depending on the os. Therefore removing node_modules does not help. Locations for global node_modules folders are
%USERPROFILE%\AppData\Roaming\npm\node_modules (Win10) or
/usr/local/lib/node_modules (Linux),
check this stack overflow post on how to locate global packages.
it will depend on the package manager you are using
delete node_modules
if you are using yarn run yarn or yarn install and then yarn serve
if you are using npm run npm install and then npm run serve
In my case, the package #vue/cli-service is installed in my local node_modules environment, but not my global environment, so it cannot be used as a command. I type .\node_modules\.bin\vue-cli-service serve and it works.
As it is mentioned in terminal that node_modules is missing from your project, so you can't directly use npm run serve, first you have to do npm install then do npm run serve. It will work fine
In my case I ran below commands in GitBash and it worked fine
npm install
npm run serve
If you are using cmd in windows.
deleting the node_modules folder and after that run npm istall from
the cmd.
run npm run serve and see if it works this time
In my case, I have checked the folder of node_modules was missing. I am using Windows. So I run this in cmd.
npm install
npm run serve
Then I check it in localhost like usual.
This issue mostly happens when either #vue/cli is not installed or in most cases,
#vue/cli is already installed and you are currently working on a project and when running
yarn serve or npm run serve.
Most at times, this issue is been caused by broken dependencies.
to fix this issue, simple run
yarn install or npm install
depending on your package manager.
well after trying all the solutions above and it still haven't worked for you then you probably have a stupid space in the full directory of your Vue project like in my case. so remove that that space and it will work from then on.
Remember to set the NODE_ENV=development and run npm install again
Try changing the project path to one without spaces, it worked on windows 10
I had faced the same problem in windows. Then
first I deleted the node_module. then I run npm install.
For Windows you should modify package.json to:
"scripts": {
"serve": "vue-cli-service.cmd serve",
"build": "vue-cli-service.cmd build",
"lint": "vue-cli-service.cmd lint"
}
,
I had the same issue using windows + WSL2 (Ubuntu 20.04). Looking at the logs generated after trying to run npm i I noticed that my WSL2 environment did not have python2 installed. So to solve I ran the following commands:
sudo apt-get install python2
rm -rf node_modules
npm i
npm run serve
I faced the same in Windows. Had to run npm install again. Then it worked perfectly.
Wait, what's the difference between #vue/cli and #vue/cli-service? When you install both, they show different number of packages installed. The latter solved my issue actually but everyone keeps saying install #vue/cli.
try running npm i or npm install and then proceed to run npm i vue after previous installation done. works for me
you need use "npm install" at Command Line
Before running "npm install", try running this command first:
npm set strict-ssl false
Like you, I got the error below when I ran npm run serve from the CMD command line,
'vue-cli-service' is not recognized as an internal or external
command, operable program or batch file.
I got past this familiar error by using the following command to add the npm folder to the PATH that CMD searches for executables:
path=%path%;C:\Users\<USERNAME>\AppData\Roaming\npm
where <USERNAME> is your Windows user profile directory name. Only then was I able to run the following commands successfully:
npm install
npm run serve
What solved the issue for me was renaming the directory. I had used the symbol "&" on the folder name and it seems to break things, so changing it to "and" fixed the issue.
This will probably be an incredibly niche thing, but if I help even 1 person it's fine by me.
I have a project, I can run it well on Linux, but i have the same issue on windows, I solve it this way (I hope in your case it works too):
Delete the node_modules
Install it again with npm i
While installing the dependencies of vue-cli, vue is not identified. Why?
rm -rf node_modules and npm install again
have a look here
Add sudo before yarn when installing
yarn global remove #vue/cli
sudo yarn global add #vue/cli
vue
I had the same issue for a while.
TL;DR
npm install #vue/cli-service --save-dev
As the documentation specify it is a development dependency https://cli.vuejs.org/guide/#cli-service
The CLI Service (#vue/cli-service) is a development dependency. It's an npm package installed locally into every project created by #vue/cli.
Origin
I had a fresh install of nodejs
And just did
>> sudo npm install -g #vue/cli#latest
>> vue --version
#vue/cli 4.5.8
The issue
The issue presented like this
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
/bin/sh: 1: vue-cli-service: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The fixes:
npm install #vue/cli-service --save-dev
Which led me straight to another error message
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
ERROR Error: Cannot find module 'vue-template-compiler/package.json'
Which I fixed the same way
npm i vue-template-compiler --save-dev
And now it is working fine.
Installing current version without permanently installing vue-cli.
npx #vue/cli create appname
It shows the vue executable is located at /home/alisha/.local/bin. So probably this location is not there in your $PATH.
You should be able to run the vue commands if you provide the full path, like:
~/.local/bin/vue create hello-world
You can also see if that directory is in your PATH by running some command like:
echo $PATH | grep '.local/bin/'
If it's there, you would see it, otherwise you can add it to your path by placing it in your ~/.profile.
Edit ~/.profile and add the following at the bottom of it.
PATH="$HOME/.local/bin:$PATH"
Hope it helps!!
I had the same issue while making a build for production.
You will require vue-cli to be installed. Use below command to install the latest version.
npm install -g #vue/cli#latest
Then
npm install
Might have to do with you having an old version on your computer:
Warning regarding Previous Versions
The package name changed from vue-cli to #vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with
npm uninstall vue-cli -g or yarn global remove vue-cli.
You can find it here: https://cli.vuejs.org/guide/installation.html
THIS FIXED THE ISSUE FOR ME:
After running
sudo npm install -g #vue/cli
I ran
sudo nano $HOME/.profile
and pasted the following line
export PATH=$PATH:/home/chike/.npm-global/bin
after writing the code, next thing I did was Ctrl + O, ENTER and Ctrl + X then wrote
vue init webpack myapp
When you install vue using cli that time you got the path of vue.Now you can copy the bin folder path.
In my example /home/sublime/.npm-packages/bin
Now you export the path below command
export PATH=$PATH:/home/sublime/.npm-packages/bin
I solved mine by running (add sudo if needed)
npm i -g vue-cli#2.9.6
npm i -g #vue/cli
Got similar issue when deploy vue project in jenkins.
Here is what I did:
Add node's bin/ dir, to jenkins user's .bashrc file.
e.g
# node
NODE_HOME=/home/dev/.nvm/versions/node/default
PATH=$NODE_HOME/bin:$PATH
Tips - about nvm & yarn
When you manage node version via nvm, make sure you already choose the node version in terminal. e.g:
nvm use stable
node -v
If you use nvm, and installed yarn via npm, then better install vue-cli via npm not yarn, otherwise the vue executable is not placed into node's bin/ dir, at least that's the case in my tests, and as a result will cause you fail to find the vue command.
Using Yarn on Ubuntu it is installed to ~/.npm-packages/bin/. You must add this directory to your PATH. For example run the following command, close your terminal and open a new one.
user#machine:~$ echo 'export PATH="$PATH:~/.npm-packages/bin/"' >> ~/.bashrc
Note: if the file ~/.bashrc does not exist then simply create it.
Following worked for me:
First remove all the existing ones:
yarn global remove #vue/cli
yarn global remove #vue/cli-service
sudo yarn global remove #vue/cli
sudo yarn global remove #vue/cli-service
Then add #vue/cli using sudo:
Note: use sudo if required
yarn global add #vue/cli
yarn global add #vue/cli-service
Then, the final thing to do is to RESTART the terminal.
vue --version
#vue/cli 4.5.9
If you already got a project, the only two things you need to do is:
Delete the directory node_modules (it is safe, since it is not under git and will regenerate in the next step)
In the command-line write yarn install (it will install everything you need)
If you start installing vue-cli manually in a existing project, it the package.json and package-lock.json will be updated. If you already did. Do a checkout from git, and follow my steps above
This may be a problem caused by version conflicts. "export PATH=$PATH:" This is really useful in some cases. But if you are also like me, after trying the direct “export path” method in the comment above, restarting the terminal still can not execute the situation, you can try this way.
Uninstall Vue
npm uninstall -g #vue/cli
Check the local-global npm package installation path, vue is installed in this directory, check if it has been removed.
npm root -g
Install vue (you can check with https://cli.vuejs.org/#getting-started to find the latest command)
npm install -g #vue/cli
Create a connection to the /usr/local/bin directory(You need to find the vue.js path after the local installation first, then replace this path with your latest local install path:/Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js)
ln -s /Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js /usr/local/bin/vue
View version number
vue -v
I was getting the same error because Node.js was not installed. My issue got resolved by installing Node.js using the following command:
sudo apt install nodejs-legacy
To see if you already have Node.js and npm installed and check the installed version, run the following commands:
node -v
npm -v
If both are installed then follow the steps here:
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
I installed the package using yarn global add #vue/cli on my Ubuntu box and found the binary in /home/vonkad/.yarn/bin.
I had to modify my /home/vonkad/.bashrc and add the directory to the path export PATH=$PATH:/home/vonkad/.yarn/bin.
To fix this situation, I had to add the following line to my .zshrc (maybe in your case is .bashrc)
export PATH="$(yarn global bin):$PATH"
Effectively, the yarn global bin is a folder where vue (vue-cli 3) was placed.
What helped me
mac os catalina with zsh terminal
Uninstalled node and npm using https://www.positronx.io/how-to-uninstall-node-js-and-npm-from-macos/
Downloaded node/npm from https://nodejs.org/en/download/current/
sudo npm install -g #vue/cli
vue --version (#vue/cli 4.5.4)
I faced the same issue and now resolved. In my case I installed Node.js and NPM using the default Ubuntu repository by using this command sudo apt-get install nodejs npm
The problems seemed like those 2 packages are not well maintained so it caused some bugs.
So I purge those packages and reinstall it from nodesource which is officially recommended way to install (reference: Installation instruction from nodesource) using these commands.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
Then reinstall #vue/cli again
sudo npm install -g #vue/cli
Now these issues have gone. Hope it helps some programmers.
You need to install vue via sudo like explained in the doc:
https://cli.vuejs.org/guide/installation.html
If you have WSL2 running and you use zsh like me, just add
yarn global add #vue/cli
# add this line to ~/.zshrc
export PATH="$HOME/.yarn/bin:$PATH"
$ vue --version
#vue/cli 4.x.xx
You can try the following code install see
npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev
I have installed webpack using
npm install -g webpack
and
npm install webpack
I also installed webpack-dev-server
npm install -g webpack-dev-server
After completion of installation, I ran the command webpack but, it shows below error
webpack: command not found
I am not getting what is the error.
Your webpack exists in ./node_modules/.bin/ folder . So you should execute this command :
./node_modules/.bin/webpack
Check out the answer in this thread .
webpack command not working
As a good practice is recommended to install webpack and webpack-dev-server locally, more info here.
yarn add webpack webpack-dev-server --dev
# or
npm install webpack webpack-dev-server --save-dev
Then you can add these lines to your scripts section in your package.json file.
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server --progress --colors"
}
and finally
npm start
npm run build
Note: You need to have a webpack.config.js in the root folder to make it run correctly.
I needed to manually install:
npm install --save-dev webpack-cli
I guess its needed so that Angular CLI actually understands the commands related to Webpack.
In ubuntu u can try sudo apt install webpack
If you want to use global installation, you can find webpack script in [node_installed_path]/lib/node_modules/webpack/bin/, you can use with absolute path, adding to PATH environment variable, or symbolic link, etc.
If you want to use local installation, find it in ./node_modules/.bin/.
I recommand using local installation (for same reason about babel).
You need to be in proper folder to run webpack command.
What I mean by proper folder is folder in which you placed your installed module and module's package.json file.
Cause you installed it with -g parameter it is installed globally and you should find it in: ./node_modules/.bin/webpack.
Best practice is to install modules per project ( folder in which is project) not globally.
webpack -v: webpack command not found
node -v: v16.14.2
npm -v: 8.5.0
Tried to install webpack globally or locally and a lot of other ways to fix this issue but failed, below solution fixed my case (my case is a little bit special, I reset the prefix as below)
npm config set prefix "C:\Program Files\nodejs\npm_modules"
Solution: add the folder path xxx/npm_modules/ which included webpack.cmd to the System variable Path
How to find the folder path xxx/npm_modules/ which included webpack.cmd?
npm config ls
webpack.cmd in folder npm_modules, you will need this path to be added to System variable Path
For example, to launch locally installed gulp, I have to run the following command from inside of my project:
node_modules/gulp/bin/gulp.js
To be able to launch npm packages only by their name, I want to include node_modules relatively to project's root dir. Is this possible?
P.S
I know how to install npm packages globally, but I'm trying to avoid doing that.
I hope I understand you correctly: You are trying to execute programs like gulp from your local install.
You can set up a npm script like so in your package.json:
package.json
...
"scripts": {
"build": "./node_modules/.bin/gulp"
}
...
Then, you can run gulp via npm run build from your command line. (Or optionally you can type ./node_modules/.bin/gulp)
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.