This is the first time I'm building something with Electron.
Now, I read everything there is in the FAQ section of this module (node-pcsclite) and the "Can I use this library in my Electron app?" section.
I tried everything from the Electron docs (Using Native Node Modules). The only thing I didn't try is "Manually building for a custom build of Electron" - since I'm not running a custom Electron build.
Things I tried:
Different versions of almost everything.
Tried doing everything on OSX and Linux.
Older node and npm versions.
Different electron headers.
Checked that the cpu target architectures are matched.
Tried packaging the app with electron-builder and running it on OSX.
Tried re-configuring the electron-builder with options such as buildDependenciesFromSource and npmRebuild set to true.
Removed node_modules, removed cache and tried re-installing everything a few times.
Tried manually copying the "pcsclite.node" from node_modules/#pokusew/pcsclite/build/Release" into the build folder of the project and repackaging it again - still getting the same error.
No success.
I keep getting the following Uncaught Exception whenever I run the app (whether with "electron ." (npm start) or as a fully packaged app with electron-builder).
Error: Cannot find module 'pcsclite'
at Module._resolveFilename (internal/modules/cjs/loader.js:584:15)
at Function.Module._resolveFilename (/Users/flackjap/Code/vozzi/electronic-service-book/first-test/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/common/reset-search-paths.js:43:12)
at Function.Module._load (internal/modules/cjs/loader.js:510:25)
at Module.require (internal/modules/cjs/loader.js:640:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/flackjap/Code/vozzi/electronic-service-book/first-test/main.js:4:18)
at Object.<anonymous> (/Users/flackjap/Code/vozzi/electronic-service-book/first-test/main.js:144:3)
at Module._compile (internal/modules/cjs/loader.js:693:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
at Module.load (internal/modules/cjs/loader.js:602:32)
I'm not sure if this is the general problem with building native modules or just a problem with this module specifically. I tried googling and didn't find enough relatable issues, so it seemed to me that the problem might actually be with this module specifically.
This is my package.json:
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"distt": "electron-builder",
"dist": "build"
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron-builder": "^20.38.5",
"electron-rebuild": "^1.8.4"
},
"dependencies": {
"electron": "^4.0.4",
"#pokusew/pcsclite": "^0.5.1"
},
"build": {
"buildDependenciesFromSource": true,
"nodeGypRebuild": false,
"npmRebuild": true,
"appId": "electron.vozzi.app",
"dmg": {
"contents": [
{
"x": 110,
"y": 150
},
{
"x": 240,
"y": 150,
"type": "link",
"path": "/Applications"
}
]
},
"linux": {
"target": [
"AppImage",
"deb"
]
},
"win": {
"target": "squirrel",
"icon": "build/icon.ico"
}
}
}
The only thing I find a bit suspicious is the folder structure for this module, since it has two parent folders (node_modules/#pokusew/pcsclite/...), and that maybe some paths are misconfigured, but I don't know where to look or how to debug. I did however see at some Stackoverflow comments that people are manually configuring some module paths in some cases, but I'm not sure how should I approach this, or even if I should be doing that.
Related
I have a Node JS server written with ES6 features and use Babel to transpile the code for production. The code itself complies and works fine. I am also able to run my "dev" server and test it locally with this command:
npm run dev
which runs this command inside my package.json:
"dev": "nodemon --exec babel-node ./src/server.js"
Pretty standard so far.
I am having issues with debugging my code so I can use breakpoints. Here's the launch script in my VS Code launch.json file:
{
"name": "Debug",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/src/server.js",
"stopOnEntry": false,
"sourceMaps": true,
"args": [],
"preLaunchTask": null,
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
"runtimeArgs": ["--no-lazy"],
"env": {
"NODE_ENV": "development"
},
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
}
And my .babelrc file:
{
"presets": [
[
"#babel/env",
{
"targets": {
"node": "current"
}
}
]
],
"env": {
"development": {
"sourceMaps": "inline",
"retainLines": true
}
},
"comments": true,
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
]
}
When I try to enter debug mode I get this execption thrown right away:
Exception has occurred: Error: Cannot find module 'kexec'
Require stack:
- F:\Dev\Web Development\****\dev\server\node_modules\#babel\node\lib\babel-node.js
- F:\Dev\Web Development\****\dev\server\node_modules\#babel\node\bin\babel-node.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
at Function.Module._load (node:internal/modules/cjs/loader:804:27)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at F:\Dev\Web Development\****\dev\server\node_modules\#babel\node\lib\babel-node.js:65:68
at processTicksAndRejections (node:internal/process/task_queues:96:5)
This is where is gets really odd. I pulled the same sourcecode to my laptop and debugging worked just fine. I also spun up a sandbox virtual machine on my Windows 10, did a clean install of Node + VS Code on it, and it worked perfectly there too.
There's something in my current environment that is causing this issue and I cannot figure it out. I've been trying to solve this issue for a few days now with no success.
Here are the steps I have already taken:
Upgrade and downgrade versions of Node + NPM and retry using
different versions
Delete node_modules and reinstall with "npm install" (and using npm ci)
Completely uninstall Node and do a fresh install
Removed user and system environemnt variables before the fresh install
Manually delete all NPM caches from %AppData% folder
I also want to point out that when I used a different launch script that is attached to a process ID, I was able to debug the code, but I am trying to streamline this process instead of having to choose the process each time.
This method does work:
npm run dev to start the dev server, which runs this code:
"dev": "nodemon --exec babel-node ./src/server.js"
I then run the debugger and attach it to the running process. Here's the launch script for that:
{
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"type": "node"
}
If kexec is used by Babel, isn't it already supposed to be installed as a dependecy? I couldn't find it anywhere in my modules folder though.
I also tried installing kexec separately but was receiving a lot of node-gyp errors which I tried fixing by reinstalling all of Node build tools using multiple different methods. None of these actions also fixed the issue.
Any ideas or support would tremendously help at this point.
This week I got into electron and I have built my own simple project. I want to build it into an executable file. I have followed this video with building an electron project. The build goes as it should.
loaded configuration file=package.json ("build" field)
description is missed in the package.json appPackageFile=C:\Users\evalo\Desktop\Desktop\electron\02-nekton\package.json
writing effective config file=dist\builder-effective-config.yaml
packaging platform=win32 arch=x64 electron=16.0.5 appOutDir=dist\win-unpacked
building target=nsis file=dist\nekton Setup 1.0.1.exe archs=x64 oneClick=false perMachine=false
building block map blockMapFile=dist\nekton Setup 1.0.1.exe.blockmap
After that, I ran the installer and installed the app without any problem and launched the shortcut, which had been generated on the desktop. The main window didn't show up but in Task Manager I could see that the application is running (3 times actually after one launch, don't know why)
Content of my package.json file, if it helps:
{
"name": "nekton",
"produktName": "nekton",
"version": "1.0.1",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"build": {
"asar": true,
"appId": "nekton",
"win": {
"target": [
"nsis"
],
"icon": "nekton.ico"
},
"nsis": {
"oneClick": false,
"installerIcon": "nekton.ico",
"uninstallerIcon": "nekton.ico",
"uninstallDisplayName": "Nekton-uninstaller",
"license": "license.md",
"allowToChangeInstallationDirectory": true
}
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron-store": "^8.0.1",
"wallpaper": "^6.0.0"
},
"devDependencies": {
"electron": "^16.0.5",
"electron-builder": "^22.14.5"
}
}
One thing, which might affect this behaviour is that I hadn't saved electron as dev dependency before I started working on the app. I just installed it: npm i electron. When I tried to build it gave my error with a hint to move electron into dev dependencies. So I ran:
npm uninstall electron
npm i --save-dev electron
Tried to launch the app with: npm start and all worked flawlessly. So I assumed that this didn't affect the project.
**Edit:**
-----------------
I made and build an app to show static HTML files in the main window with the same build configuration. All worked flawlessly. The app launched and behaved as expected. So I have manually created a new project and copied the content of each file to the project which has been built before without error. I have encountered the same problem. The app works fine with npm start, builds, installs. After installation is complete the app 'runs' but without a window. I think there might be a run error, which would be logged into the terminal in vscode at the start and the application is halted. Is there a way I can see the terminal for my app after it has been installed?
I've installed Bootstrap 4 using node into an Angular 2 project by following this guide:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Followed the instructions to the letter, but now when I try and run the application using ng serve I get compile errors.
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
at error (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:320:18)
at Function.select (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:438:37)
at D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:207:41
at Array.forEach (native)
at browserslist (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:196:13)
at Browsers.parse (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:44:14)
at new Browsers (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:39:28)
at loadPrefixes (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
at plugin (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
at LazyResult.run (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
at processing.Promise.then._this2.processed (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
at LazyResult.async (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:228:27)
# ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
# multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
My apps section of my .angular-cli.json file (as far as I can see) seems ok and is the only file I changed since installing Bootstrap 4 and the physical bootstrap files are in the node modules folder. My node_modules folder is in the root of the project on the same level as the src folder just as the cli sets it up by default.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
Have I missed a step somewhere? Or maybe the guide I'm ready is out of date, I'm just not sure, but this feels like it should be really simple and should just work?
Have you seen this bug report?
Basically, two main solutions I get from this:
Try with other minor versions of Bootstrap
Use Sass and import Bootstrap Sass files instead of adding Bootstrap minified CSS in angular-cli.json
Personally I copy the entire Sass code from Bootstrap Github tags into my project. This gives me more flexibility.
When I enter $ webpack into my terminal I receive the following error:
webpack config
/Users/kristenmkulha/Desktop/react-help-queue/config/webpack/development.js
not found, please run 'bundle exec rails webpacker:install' to install
Webpacker with default configs or add the missing config file for your
custom environment.
I found a similar issue here: Webpack command in node brings /config/webpack/development.js not found and changed the deprecated babel-preset-es2015 to babel-preset-env and I already had the -loader suffix. These updates still result in the same error.
Here is my webpack.config.js:
const webpack = require('webpack');
const { resolve } = require('path');
module.exports = {
entry: [
resolve(__dirname, "src") + "/index.jsx"
],
output: {
filename: 'app.bundle.js',
path: resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
options: {
presets: [
"env",
"react"
]
}
},
],
}
};
Here is my package.json file:
{
"name": "react-help-queue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1"
}
}
Huh, it looks like running "webpack" on the command line is invoking a different tool (maybe "webpacker"? https://github.com/rails/webpacker)
There are two ways to solve this:
add a additional script to package.json to kick off webpack.
"scripts": {
"build": "webpack -p"
},
With the above added, execute this command in a terminal: npm run build.
When a script is executed via npm run, npm will automatically include binaries (like webpack) in its PATH, so it the script uses the webpack binary that is part of the apps dev dependencies. Read more on this here: https://docs.npmjs.com/cli/run-script.
Install webpack globally: npm install -g webpack.
This will make webpack available at the command line in all cases, which allows the developer to just type webpack and have it run. This should(?) override the existing "webpacker" command. If not, you may need to uninstall that tool or modify your PATH.
Installing npm packages globally is convienient but it can cause headaches. For example, if two different projects need two different versions of webpack, it may not be efficient. Also, you may find there are several steps in a "build" to execute once an application gets more complex, so having a convenient script included in the project may be appealing (especially for projects with multiple developers).
Hope this helps!
EDIT #1: seems like I have a working configuration, all suggestions to improve this are welcome though. See answer: https://stackoverflow.com/a/42269408/1155847
ORIGINAL QUESTION:
I'm currently trying to setup my environment so that my package.json's devDependencies typescript version will be used. What are some of the best practices for this, so that it is "editor unaware" and preferably can be used as an npm script, e.g.: npm run tscompile?
To be clear - I can get everything working when using npm install typescript -g - but then I'm relying on a global installed version, whic is not what I want - as we'll want to work in a team and set on a specific typescript version for each member before upgrading, so we're all on the same page.
I'm currently trying to set it up like this - yet npm then complains it doesn't recognize "node_modules" as an internal or external command... I presume I do have to pass the tsconfig.json to tsc as well, or at least give it the "working directory" - but I can't even get past launching tsc from my locally downloaded npm cache.
package.json
{
"name": "tswithnodejsgettingstarted",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"scripts": {
"start": "node app/index.js",
"tscompile": "node_modules/typescript/tsc"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "2.1.6"
}
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"sourceMap": true,
"outDir": "app"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
Ok... It seems like it was as simple as this (see below). Answering it here, for anyone else looking for the answer. Or please let me know if there are better solutions.
Configure the script like "tsc": "tsc" inside package.json. Then just run npm run tsc and it will use your tsc version you have installed locally, and discover your tsconfig.json of course. It doesn't use your global version - as I uninstalled that one - just entering tsc in the command line errors out.
E.g.:
Check the repo* where I was playing with this.
package.json
{
"name": "tscnodejsgettingstarted",
"version": "1.0.0",
"description": "",
"main": "app/index.js",
"scripts": {
"start": "npm run tsc && node app/index.js",
"tsc": "tsc"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "2.1.6"
}
}
*repo: https://github.com/pluralsight-courses/typescript-fundamentals/tree/master/001-GettingStarted
You can also use the prestart script. By default it runs before the start command (see all the default scripts that you can set up here).
"scripts": {
"prestart": "npm run tsc",
"start": "node app/index.js",
"tsc": "tsc"
}