Error when building my electron app - javascript

I'm stuck with a problem when building my Node JS/electron app with electron-builder. It works perfectly when running npm start. But, when I execute the command build -w (for windows) it fails with this log.
Here is my JSON file:
{
"name": "Munshiiii",
"version": "1.0.0",
"description": "This is a short Description of the project",
"main": "index.js",
"scripts": {
"start": "electron .",
"dist": "build -w"
},
"author": "Hicham Dbiza",
"license": "ISC",
"devDependencies": {
"electron": "1.7.8",
"electron-prebuilt": "^1.4.13"
},
"dependencies": {
"asar": "^0.13.0",
"cradle": "^0.7.1",
"fs": "0.0.1-security",
"git": "^0.1.5",
"jquery": "^3.2.1",
"jsdom": "^11.3.0",
"loke-ipc": "^1.0.5",
"mongodb": "^2.2.33",
"node-couchdb": "^1.2.0",
"pouchdb": "^6.3.4",
"pouchdb-replication-stream": "^1.2.9",
"scanner.js": "^1.0.0"
},
"build":{
"appId": "com.hicham.dbiza.faizan",
"win":{
"target": "nsis",
"icon": "build/Munshiiii.ico"
}
}
}
for this project Im using:
fs
pouchdb
electron
jquery
....
I already used electron-packager and it works almost fine with one problem: See this picture, which means all links inside the js files (e.g: fs.readFileSync('./assets/state','utf8')) won't work.
I have also added some native js click and keypress listeners... could that be a problem?
My electron version is 1.7.8.
I appreciate your help.

Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
if you are using Npm
do just simple steps terminal:
1 npm install yarn -g
2 yarn
3 yarn pack
Read this Blog (reactJS in electronApp with .exe file)

Have you installed electron-builder? You don't have it in your package.json. Then I would propose to use the electron-builder command, as recommended by the authors.
Run npm install electron-builder --save-dev and change your dist command to run just electron-builder. Since electron-builder per default build for the current running OS, it's not necessary to send the -w flag. If you still experience problems, try to set the following env variable to get a better stack trace:
DEBUG=electron-builder,electron-builder:*
Edit after getting more information from the comments:
According to this issue at GitHub your first issue seemed to be caused by permission errors, and was solved with running as administrator.
From electron-builders README:
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Try to remove your node_modules folder and run
npm install yarn -g && yarn && yarn pack

First I installed electron-builder with following line
npm install -g electron-builder
then I created a build folder in the root of my project, containing the .ico file with the app logo. then I wrote following parts in my package.json
"build": {
"appId": "your.app.id",
"productName": "Your final product name"
}
and
"scripts": {
"start": "electron .",
"pack": "build --dir"
}
That was everything I needed. I opend my root folder in the terminal and executed
build -w
That created an folder called dist, with an unpacked version of my app plus an installer for the app.

Related

Next.js is not recognizing '#types/react'

When I try to run my Next.js app with npm run dev I get an error message saying that I don't have the required packages to run Next with Typescript:
Please install #types/react by running:
npm install --save-dev #types/react
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
However, the module '#types/react' is installed. I tried running npm install --save-dev #types/react and got no error messages (just a bunch of warnings but I don't think they are the problem).
How can I solve this and run the project?
Seems like there is a bug in the current #types/react version (specifically v18.0.2), you can downgrade to 18.0.1 with npm install --save-dev #types/react#18.0.1
Source: https://github.com/vercel/next.js/issues/36085
I used yarn add -D #types/react#18.0.1 and it worked perfectly!
Netsu is right, seems like there is a bug in the current #types/react version (specifically v18.0.2).
My solution was to add --only to production:
RUN yarn install --only=production
An alternative approach i took here was to create a new nextjs project using npx create-next-app. And then copied the versions of all the dependencies and devDependencies.
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#types/node": "18.7.1",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"eslint": "8.21.0",
"eslint-config-next": "12.2.4",
"typescript": "4.7.4"
}
}
Copy all the versions listed in the package.json you get after create new nextjs project. This will ensure that your core dependencies are compatible with each other.

Getting error while runing npm run test in CI

here is my package.json:
{
"name": "cypressautomation",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "/node_modules/.bin/cypress run "
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^9.2.0",
"mochawesome": "^7.0.1",
"mochawesome-merge": "^4.2.1",
"mochawesome-report-generator": "^6.0.1"
},
"dependencies": {
"cypress-iframe": "^1.0.1"
}
}
I have built some test scripts, and after I saved all files and run npm run test I get the error:
cypressautomation#1.0.0 test > /node_modules/.bin/cypress run
The system cannot find the path specified.
You might be facing issues with relative/absolute path conventions.
First let us cover the basis. From the command line at the folder where the package.json file is located, run npm install for the packages to be downloaded into the local node_modules folder.
You could change the command on package.json to:
"test": "cypress run"
this way we leave npm to figure out where cypress is located (will be in the node_modules folder and npm 'knows' about it)
then try the test command again:
npm run test
I hope you are trying to run project in correct path. if your npm run test is not working, first in command prompt try running command then add the same in package json.
I use this coomand to run project ./node_modules/.bin/cypress run

Zsh: command not found: snowpack

I am trying to create snowpack config file for my preact application. I have already installed all necessary libraries but it still show an error when I try to run this command snowpack init. error zsh: command not found: snowpack
This is my package.json file
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"author": "EF",
"license": "MIT",
"scripts": {
"start": "snowpack dev --port 3000",
"build": "snowpack build"
},
"devDependencies": {
"#prefresh/snowpack": "^3.1.2",
"snowpack": "^3.8.8"
},
"dependencies": {
"preact": "^10.5.15"
}
}
What could be the problem here?
The problem is that the snowpack binary isn't in your $PATH. The only time it should be is if you globally installed it. But because you haven't, you cannot access it.
There's an easy solution (and the correct way to run binaries) and that is using npx or yarn. Either will do the trick, so whichever you prefer.
npx snowpack ... or yarn snowpack ... from within your project will be able to access the snowpack binary and run it correctly.

Error installing package using npm instead of yarn

I have created git repository which will be used as npm package in other project. Lets say that sharable repository name is genesis-service-broker.
I am using this shareable repository inside one of the service(activation service). In this project, I am installing package using yarn. Its running perfectly fine here.
"dependencies": {
...
"genesis-service-broker": "git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis",
...
}
When I am trying to use genesis-service-broker package inside onother service(partner service) its not able to install the dependencies. In this project, I am installing dependencies using npm. If I install dependencies using yarn its working perfectly fine.
I am not getting any errors in npm install command. I am just not able to find genesis-service-broker folder inside node_modules, when I am installing dependencies using npm.
package.json file inside genesis-service-broker repository. (for reference purposes)
{
"name": "service-broker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git#git.my_project.com:amol.barewar/service-broker.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"config": "^3.2.5",
"form-data": "^3.0.0",
"node-fetch": "^2.6.0",
"request": "^2.88.0",
"uuid": "^3.4.0"
}
}
there is a difference in behaviour here, between yarn and npm
yarn add retains the name of the git project in dependencies, and creates a folder with the same name in node_modules.
So, yarn add git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis will lead to a module getting installed as node_modules/genesis-service-broker
On the other side, npm install gets the name from the name property in package.json; and it will lead to module getting added as node_modules/service-broker in your case... and also the dependencies map will be like
"dependencies": {
...
"service-broker": "git+https://${key}:x-oauth-basic#git.my_project.com/${user}/genesis-service-broker.git#create_service_broker_for_genesis",
...
}
Because of this difference, the requires(...) might fail.
As, in this case, with yarn that module will be available through -
require('genesis-service-broker')
And for npm through -
require('service-broker')
So, all in all, it will help to keep the name property in package.json same as the project name.

Webpack with html-webpack-plugin, error when installed globally

I know this problem has been reported elsewhere, when webpack and html-webpack-plugin are installed with npm -g:
module.js:341
throw err;
^
Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:339:15)
And the answer people have found is to install one or both locally to the project. But that won't work for me. I need to get this working in our shared build system, not just in my dev environment. This means having it installed globally so that all projects have access to it via their ant/nant build scripts run by Jenkins.
My project is very simple. A couple of html pages with content generated by reactJS scripts included in the html with script tags. This should be easy, and its beginning to be a pain. Thinking of dumping webpack and looking for another simple javascript package manager.
Are there environment variables that we can use to tell webpack to look in the global node 'node_modules' directory for 'require'd plugings/packages?
Suggestions?
You don't have to install webpack globally for Jenkins.
Add to your package.json under scripts a command that runs the local webpack, like this:
"scripts": {
"start": "webpack-dev-server --inline --hot",
"build": "webpack -p"
},
Now Jenkins can run your build script, without having a global webpack installed:
npm run build
In this way you can maintain multiple projects with different versions of webpack, and each project can have it's own local dependencies.
The scripts prop is part of the projects package.json. The package.json contains all dependencies, and dev dependencies (build, testing, etc...) of the project. Using the package.json running NPM install on your build machine, you can install locally (part of the project dir) all dependencies. A sample of a package.json for an angular project built with webpack:
{
"name": "whatever",
"version": "1.2.0",
"description": "whatever",
"scripts": {
"start": "webpack-dev-server --inline --hot", // runs the dev server
"build": "webpack -p" // builds the release
},
"dependencies": { // the dependencies that are part of the actual release
"angular": "1.5.0",
"angular-animate": "1.5.0",
"angular-messages": "1.5.0",
"angular-ui-router": "0.2.15"
},
"devDependencies": { // build dependencies
"babel-core": "6.5.2",
"babel-eslint": "6.0.0-beta.1",
"babel-loader": "6.2.3",
"babel-preset-es2015": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"css-loader": "0.23.1",
"file-loader": "0.8.5",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.14.0",
"less-loader": "2.2.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.14",
"webpack-dev-server": "1.14.1"
},
"license": "MIT"
}
Whenever the git master is updated, Jenkins pulls the latest commit, cleans the current build directory, including all dependencies, and runs in the project folder the following commands:
npm install to install all dependencies locally, as part of the project folder
npm run build to build the release
Jenkins is not aware of webpack or any other build tool or dependency. The only things that are installed globally on Jenkins are nodejs and npm.
And here is the simple bash script that runs the commands:
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
npm run build // run the build script

Categories