Good day, i'm currently doing a tutorial on scotch.io where i'm trying to make a music player using electron and react, but when i try to execute 'npm run watch' i get this error message:
electron-quick-start#1.0.0 watch: watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-quick-start#1.0.0 watch script 'watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose'.
npm ERR! This is most likely a problem with the electron-quick-start package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs electron-quick-start
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls electron-quick-start
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Alejandro\Documents\Proyectos\music-player\npm-debug.log
This is my package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron/electron-quick-start.git"
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial"
],
"author": "GitHub",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/electron/electron-quick-start/issues"
},
"homepage": "https://github.com/electron/electron-quick-start#readme",
"devDependencies": {
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"electron-prebuilt": "^1.2.0"
},
"dependencies": {
"axios": "^0.13.1",
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"classnames": "^2.2.5",
"electron-prebuilt": "^1.2.7",
"electron-reload": "^1.0.0",
"jquery": "^3.1.0",
"react": "^15.2.1",
"react-autocomplete": "^1.0.1",
"react-dom": "^15.2.1",
"react-sound": "^0.5.0",
"soundmanager2": "^2.97.20150601-a"
}
}
From what i've read in the tutorial browserify is supposed to come with watchify as well, however when i installed it as a separate module it worked but then i got the following error:
console.error("SyntaxError: C:/Users/Alejandro/Documents/Proyectos/music-player/app/app.js: Unexpected token (12:10) while parsing file: C:\Users\Alejandro\Documents\Proyectos\music-player\app\app.js");
I used the same tutorial, but I could not get everything working by applying the code snippets from the tutorial.
Do this instead:
install both browserify and watchify:
npm install -g browserify watchify
clone the author's music player github repository instead of electron-quick-start. Then add or modify the tutorial code snippets.
Related
I am just trying to install react but I am getting errors.
I have installed npm -v 8.12.1 version in my system. I have tried to downgrade react but it doesn't help
I have tried these type:
update npm npm install npm -g
downgraded react to "react": "15.3.0"
cleared cache: npm cache clear
removed node_modules, rm -rf node_modules,
reinstalled node_modules, npm install
{
"name": "ant-design-pro",
"version": "2.0.0",
"description": "An out-of-box UI solution for enterprise applications",
"private": true,
"scripts": {
"precommit": "npm run lint-staged",
"presite": "node ./scripts/generateMock.js && cd functions && npm install",
"start": "cross-env APP_TYPE=site umi dev",
"start:no-mock": "cross-env MOCK=none umi dev",
"build": "umi build",
"site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy",
"analyze": "cross-env ANALYZE=1 umi build",
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
"lint": "eslint --ext .js src mock tests && npm run lint:style",
"lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:all": "node ./tests/run-tests.js",
"prettier": "prettier --write ./src/**/**/**/*",
"docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
"docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
"docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
"docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build"
},
"dependencies": {
"#antv/data-set": "^0.9.6",
"#babel/runtime": "^7.0.0",
"antd": "^3.11.6",
"bizcharts": "^3.2.2",
"bizcharts-plugin-slider": "^2.0.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"enquire-js": "^0.2.1",
"hash.js": "^1.1.5",
"highlight.js": "^9.13.1",
"lodash": "^4.17.10",
"lodash-decorators": "^6.0.0",
"marked": "^0.5.2",
"memoize-one": "^4.0.0",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"nzh": "^1.0.3",
"omit.js": "^1.0.0",
"path-to-regexp": "^2.4.0",
"prop-types": "^15.5.10",
"qs": "^6.5.2",
"rc-animate": "^2.4.4",
"react": "^16.8.6",
"react-container-query": "^0.11.0",
"react-copy-to-clipboard": "^5.0.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.8.6",
"react-fittext": "^1.0.0",
"react-router-dom": "^4.3.1",
"save": "^2.3.2",
"simplemde": "^1.11.2"
},
"devDependencies": {
"#types/react": "^16.4.11",
"#types/react-dom": "^16.0.6",
"antd-pro-merge-less": "^0.0.9",
"antd-pro-theme-webpack-plugin": "^1.1.8",
"babel-eslint": "^9.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"cross-env": "^5.1.1",
"cross-port-killer": "^1.0.1",
"enzyme": "^3.4.4",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-compat": "^2.5.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"eslint-plugin-react": "^7.11.1",
"gh-pages": "^2.0.0",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"merge-umi-mock-data": "^0.0.3",
"mockjs": "^1.0.1-beta3",
"prettier": "1.14.2",
"pro-download": "^1.0.1",
"stylelint": "^9.4.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"umi": "^2.1.1",
"umi-plugin-ga": "^1.0.3",
"umi-plugin-react": "^1.1.1"
},
"optionalDependencies": {
"puppeteer": "^1.6.0"
},
"lint-staged": {
"**/*.{js,jsx,less}": [
"prettier --write",
"git add"
],
"**/*.{js,jsx}": "npm run lint-staged:js",
"**/*.less": "stylelint --syntax less"
},
"engines": {
"node": ">=8.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-fittext#1.0.0
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.8.6" from the root project
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from #ant-design/create-react-context#0.2.5
npm ERR! node_modules/#ant-design/create-react-context
npm ERR! #ant-design/create-react-context#"^0.2.4" from antd#3.26.20
npm ERR! node_modules/antd
npm ERR! antd#"^3.11.6" from the root project
npm ERR! 1 more (umi-plugin-react)
npm ERR! #ant-design/create-react-context#"^0.2.4" from rc-mentions#0.4.2
npm ERR! node_modules/rc-mentions
npm ERR! rc-mentions#"~0.4.0" from antd#3.26.20
npm ERR! node_modules/antd
npm ERR! antd#"^3.11.6" from the root project
npm ERR! 1 more (umi-plugin-react)
npm ERR! 2 more (rc-tabs, rc-tree)
npm ERR! 47 more (#ant-design/icons-react, airbnb-prop-types, antd, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0" from react-fittext#1.0.0
npm ERR! node_modules/react-fittext
npm ERR! react-fittext#"^1.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#15.7.0
npm ERR! node_modules/react
npm ERR! peer react#"^15.0.0" from react-fittext#1.0.0
npm ERR! node_modules/react-fittext
npm ERR! react-fittext#"^1.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\91639\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\91639\AppData\Local\npm-cache\_logs\2022-06-03T09_27_25_556Z-debug-0.log
As the error reads, you have dependency conflict.
Run the command with --legacy-peer-deps.
npm install --legacy-peer-deps
I am trying to install the dependencies with the exact version which are listed in json file, and I got errors below:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! webpack#"^4.35.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^5.1.0" from terser-webpack-plugin#5.3.1
npm ERR! node_modules/terser-webpack-plugin
npm ERR! dev terser-webpack-plugin#"^5.1.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
since the dependencies with the required version are not the latest one, I downgrade my node.js from latest version 16 to 14+, and install with npm i --leacy-peer-deps, but the error shows still the same, seems the version from node or webpack still not compatible to the dependencies(Found: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! webpack#"^4.35.3" from the root project).
how can I solve this problem?
here is the json list:
{
"name": "example-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack-dev-server --config webpack.dev.js --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"jest-fetch-mock": "^3.0.3",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
},
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/plugin-transform-modules-commonjs": "^7.13.8",
"#babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"body-parser": "^1.19.0",
"clean-webpack-plugin": "^3.0.0",
"cors": "^2.8.5",
"css-loader": "^5.2.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^1.4.1",
"node-fetch": "^2.6.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"webpack-dev-server": "^3.11.2",
"workbox-webpack-plugin": "^6.1.5"
}
}
Try to delete package-lock.json and clear npm cache using 'npm cache clean -f' before npm i.
Caret (^) notation: It will update you to all future minor/patch versions, without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to <3.0.0
Tilde ( ~ ): It will update you to all future patch versions, without incrementing the minor version. ~1.2.3 will use releases from 1.2.3 to <1.3.
Title says it really - i can build locally but it fails to deploy. Has an issue with Timeout - not sure how to force this to work?
Here's my package.json, and the logs afterwards.
I tried adding Timeout by running a yarn install but then it triggered some other dependency issues with node-gyp
Many thanks for any tips!
Package.json
{
"name": "api",
"homepage": ".",
"version": "0.0.1",
"private": true,
"scripts": {
"lint": "eslint .",
"dev": "NODE_ENV=development nodemon --watch '**/*' -e ts,tsx,js --ignore 'src/**/*.spec.ts' --exec 'ts-node --project ./tsconfig.json' src/server.ts",
"start": "node ./dist/server.js",
"start:redis": "docker-compose up -d",
"build": "NODE_ENV=production tsc"
},
"engines":{
"node":"14.15.5",
"npm": "6.14.11",
"yarn": "1.22.15"
},
"license": "MIT",
"main": "dist/server.js",
"devDependencies": {
"#types/cookie": "^0.4.0",
"#types/puppeteer": "^5.4.4",
"#types/ramda": "^0.27.44",
"#types/redis": "^2.8.31",
"#types/user-agents": "^1.0.2",
"#typescript-eslint/eslint-plugin": "^4.19.0",
"#typescript-eslint/parser": "^4.19.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"nodemon": "^2.0.12",
"prettier": "~2.2.1",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"dependencies": {
"axios": "^0.21.1",
"body-parser": "^1.19.0",
"chalk": "^4.1.2",
"cookie": "^0.4.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-router": "^0.1.15",
"express-query-boolean": "^2.0.0",
"node-fetch": "^2.6.1",
"puppeteer": "^10.2.0",
"puppeteer-extra": "^3.1.18",
"puppeteer-extra-plugin-adblocker": "^2.11.11",
"puppeteer-extra-plugin-stealth": "^2.7.8",
"ramda": "^0.27.1",
"redis": "^3.1.2",
"user-agents": "^1.0.738",
"util": "^0.12.4"
}
}
Build logs
>
-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.15.5
engines.npm (package.json): 6.14.11
engines.yarn (package.json): 1.22.15
Resolving node version 14.15.5...
Downloading and installing node 14.15.5...
npm 6.14.11 already installed with node
Resolving yarn version 1.22.15...
Downloading and installing yarn (1.22.15)
Installed yarn 1.22.15
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules (package.json)
> puppeteer#10.4.0 install /tmp/build_e4061cb3/node_modules/puppeteer
> node install.js
> nodemon#2.0.13 postinstall /tmp/build_e4061cb3/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 477 packages from 392 contributors and audited 479 packages in 31.801s
76 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build
Running build
> api#0.0.1 build /tmp/build_e4061cb3
> NODE_ENV=production tsc
node_modules/puppeteer/lib/types.d.ts(3644,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
node_modules/puppeteer/lib/types.d.ts(6489,71): error TS2583: Cannot find name 'BigInt'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2020' or later.
node_modules/puppeteer/lib/types.d.ts(6894,28): error TS2694: Namespace 'NodeJS' has no exported member 'Timeout'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! api#0.0.1 build: `NODE_ENV=production tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the api#0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.LPsTK/_logs/2021-10-13T12_15_23_280Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
The problem seems to be missing types, here are two possible fix:
Install #types/node as a devDependencies. This package contains types for NodeJS, including the Timeout type.
Edit your tsconfig.json to set skipLibCheck to true:
{
"compilerOptions": {
"skipLibCheck": true
}
}
This will ignore type errors in d.ts files (your error come from node_modules/puppeteer/lib/types.d.ts so it should fix it).
I'm receiving a build failed error while deploying my NodeJS app to Heroku. Here is the build log:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.10.0
engines.npm (package.json): 5.7.1
Resolving node version 8.10.0...
Downloading and installing node 8.10.0...
Bootstrapping npm 5.7.1 (replacing 5.6.0)...
npm 5.7.1 installed
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json + package-lock)
npm ERR! path /tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev'
-> '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/.abbrev.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.X6IAU/_logs/2018-03-24T03_18_22_202Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app. ! Push failed
I have deleted my node_modules folder and ran npm install and deleted/installed the abbrev npm package. Still the same error after this.
Here is my package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon bin/dev",
"clean": "rm -rf dist",
"build": "npm run clean && mkdir dist && babel server -s -d dist",
"production": "npm run build && nodemon bin/production"
},
"keywords": [],
"author": "",
"devDependencies": {
"dotenv": "^4.0.0"
},
"dependencies": {
"async": "^2.6.0",
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.2",
"boom": "^7.2.0",
"compression": "^1.7.2",
"cron": "^1.3.0",
"express": "^4.16.3",
"express-rate-limit": "^2.11.0",
"express-validator": "^3.2.1",
"flat": "^4.0.0",
"generate-password": "^1.4.0",
"helmet": "^3.12.0",
"jsonwebtoken": "^7.4.3",
"moment": "^2.21.0",
"moment-timezone": "^0.5.14",
"mongoose": "^4.13.12",
"morgan": "^1.9.0",
"nodemon": "^1.17.2",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"passport-local": "^1.0.0",
"sendgrid": "^5.2.3",
"twilio": "^3.13.1",
"uuid": "^3.2.1"
},
"engines": {
"node": "8.10.0",
"npm": "5.7.1"
}
}
Any suggestions are appreciated. Thank you.
I've been using node.js/npm to deploy my React website to GitHub Pages but an error keeps showing up and not sure how to approach it. I have been looking around for solutions but there doesn't seem to be anything for this particular scenario:
I run the npm run build command for the completed application and add the correct GitHub Pages scripts in my package.json file below -
{
"name": "portfolio",
"version": "0.1.0",
"homepage": "https://darstnfrd.github.io/portfolio",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0",
"gulp-sass": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"gh-pages": "^1.1.0"
}
}
Afterwards, I run npm install --save-dev gh-pages. From here, when I run npm run deploy this error below keeps emerging -
> portfolio#0.1.0 deploy C:\Users\darren\Desktop\react2018\portfolio
> gh-pages -d build
events.js:183
throw er; // Unhandled 'error' event
^
Error: spawn git ENOENT
at _errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
at Function.Module.runMain (module.js:686:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\darren\AppData\Roaming\npm-cache\_logs\2018-03-12T02_09_20_837Z-debug.log
My GitHub Pages repository is ready to go. Additional actions I've tried are npm rm -rf node_modules, npm cache clean and reinstalling bootstrap dependency.
What exactly is the error? If any more information is needed, please let me know. Thank you very much!