Develop Reference

Vuejs - Unbound breakpoint Some of your breakpoints could not be set in VSCODE

I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.
So I decided to ask a question here, maybe nowadays there's a right way to make it work.
I've created a project that it's identical with the one I want to debug, so I can post prints here.
The project structure is:
Here is the unbound breakpoint:
Sources Tab in chrome looks like:
More detailed chrome sources tab:
vue.config.js:
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: {
devtool: "source-map"
},
transpileDependencies: true
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"**/src/*": "${webRoot}/src/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "vuejs: start",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UPDATE
#A.D asked if I've tried to use keyword
debugger;
Here is the results:
Ps: I don't want to start writing debugger in my code...
But with that i could see that the debugger file is pointing to:
C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\components\HelloWorld.vue
But the component src is actualy located in
C:\Users\vinic\Desktop\test\test\src\components\HelloWorld.vue
Why my breakpoints are not bounding?

Try to change webRoot param and leave as in the documentation, you need to include src after ${workspaceFolder}.
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
UPDATE:
After some research, i found this issue.
There is a change in this version that you used.
They changed the compiler and this affected the way to debugger.
You can use the "2.6.11" works in this version.
Note: This change affected later versions.

Appearently there are some problems with the webpack of vue versions above 2.6.11
Git hub Thread
Reddit Thread
After some discussions with #Tonielton Mota i noticed that, if I fully remove the property name from package.json and package-lock.json it works.
Here are the files that are working:
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
package.json
{
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Debugger setting breakpoints on transpiled file (VS Code, Node, ES6)

I have recently been put on a project that has a mixture of ES5/6+ code.
It uses Babel for compilation of some of the newer syntax.
I'd like to debug this (breakpoints etc.) using Visual Studio Code, but the problem I am having is that the breakpoints are hitting the transpiled files instead of the source files that I write.
Here is my package.json file:
{
"name": "xxxxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prestart": "npm install",
"start": "node index.js",
"test": "jest --collect-coverage --verbose",
"lint": "eslint **/*.js",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\""
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged --compilers js:babel-core/register --require babel-polyfill"
}
},
"keywords": [
"OAI"
],
"license": "Unlicense",
"private": true,
"dependencies": {
"aws-sdk": "^2.874.0",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"https": "^1.0.0",
"js-yaml": "^3.14.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mongoose": "^5.4.0",
"oas-tools": "2.1.7",
"request-promise": "^4.2.6",
"uuid": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.13.13",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/preset-env": "^7.13.12",
"#babel/register": "^7.13.8",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"chai": "^4.3.4",
"eslint": "^6.8.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"mocha": "^6.2.3",
"nyc": "^14.1.1",
"prettier": "2.2.1",
"pretty-quick": "^3.1.0",
"swagger-parser": "^8.0.3"
}
}
Here is my babel.config.js file:
module.exports = {
presets: [["#babel/preset-env"]],
plugins: ["#babel/plugin-proposal-optional-chaining"],
sourceMaps: true
};
And finally, here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"env": {
"NODE_ENV": "development",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch DEV",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
},
{
"env": {
"NODE_ENV": "qa",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch QA",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
}
]
}
The only posts/questions on this problem that I've found are somewhat dated and aren't too helpful.
Here is what I've already looked at on this topic:
https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
https://github.com/microsoft/vscode/issues/103556
JavaScript Development in ES6 With Debugging
https://medium.com/#drcallaway/debugging-es6-in-visual-studio-code-4444db797954
Any help, or a solution to this problem would be greatly appreciated. Thanks in advance!

You have to generate source maps files. Their purpose is to map the source files to generated files, and they are being used by the debugger.
Do this by adding the devtool: 'source-map' setting to the configuration

How to release the electron app with only modified modules/files?

I am using electron builder to package the app and releasing on github private repository and also implemented electron-updater to update the app automatically in background, everything is working fine.
but the problem is each time i am releasing the app on github using below script
"scripts": {
"deploy": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish always"
},
Electron-builder config file
directories:
output: dist
buildResources: build
nsis:
allowToChangeInstallationDirectory: true
oneClick: false
perMachine: false
deleteAppDataOnUninstall: true
license: ./license.txt
win:
target:
- target: nsis
icon: ./icons/logo.png
mac:
icon: ./icons/icon.icns
target:
- target: dmg
- target: zip
hardenedRuntime: true
gatekeeperAssess: false
entitlements: build/macos/entitlements.mac.plist
entitlementsInherit: build/macos/entitlements.mac.plist
dmg:
sign: false
linux:
target:
- target: deb
- target: tar.gz
- target: snap
asar: true
buildDependenciesFromSource: true
compression: store
publish:
provider: github
token: xxxxxxxxxxxxxxxxxxxxxxxxxxx
releaseType: release
Pakcage.json
{
"name": "testapp",
"productName": "testapp",
"version": "0.0.1",
"description": "My Electron application description",
"main": "src/main.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\"",
"clean": "npm cache clean --force",
"build": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish never",
"deploy": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish always",
"postinstall": "electron-builder install-app-deps"
},
"repository": {
"type": "git",
"url": "repourl"
},
"keywords": [],
"author": {
"name": "name",
"email": "emailid"
},
"license": "MIT",
"build": {
"appId": "appid",
"category": "Business",
"publish": [
{
"provider": "github",
"private": true,
"owner": "user",
"repo": "reponmae"
}
]
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "DesktopDMS"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"#progress/kendo-ui": "^2020.2.617", //i know kendo and synfusion UI packages increasing app size
"#syncfusion/ej2": "^18.1.59",
"axios": "^0.19.2",
"electron-json-storage": "^4.2.0",
"electron-updater": "^4.3.5",
"jquery": "^3.5.1",
"jsrender": "^1.0.6",
"material-datetime-picker": "^2.4.0",
"materialize-css": "^1.0.0-rc.2"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.52",
"#electron-forge/maker-deb": "^6.0.0-beta.51",
"#electron-forge/maker-rpm": "^6.0.0-beta.51",
"#electron-forge/maker-squirrel": "^6.0.0-beta.51",
"#electron-forge/maker-zip": "^6.0.0-beta.51",
"electron": "9.0.4",
"electron-builder": "^22.8.0",
}
}
electron builder always creating new package/installer/app with same size[in between 250-300MB] and electron updater is downloading the updated version of app.
So how can i reduce the size of progressive releases[or release only modified module/files] because its very frustrating to download complete app each time.
I have tried compression[not getting much difference] and removed some unused packages as well.
As i know VS Code/ Zoom/ Slack are managing this scenario but i don't know how.
I need some help/direction to achieve it. Thanks in advance.

Mate that's not possible at the moment. I request you to follow the common approach of bundling new application and make release.

Disable SSR in donejs

SSR is a cool donejs feature. But in my current project I have no use of it because I am building a page which gets wrapped in a cordova app only.
{
"name": "abc",
"version": "0.0.0",
"description": "abc.org",
"homepage": "www.abc.org",
"repository": {
"type": "git",
"url": "git+https://github.com/xyz/xyz.git"
},
"author": {
"name": "xyz",
"email": "xyz#gmail.com",
"url": "www.abc.org"
},
"private": true,
"scripts": {
"test": "testee test.html --browsers firefox --reporter Spec",
"start": "done-serve --port 8080",
"develop": "done-serve --develop --port 8080",
"build": "node build"
},
"main": "spotwizard/index.stache!done-autorender",
"files": [
"src"
],
"keywords": [
"",
"donejs-app"
],
"steal": {
"main": "spotwizard/index.stache!done-autorender",
"directories": {
"lib": "src"
},
"configDependencies": [
"live-reload",
"node_modules/can-zone/register"
],
"plugins": [
"done-css",
"done-component",
"steal-less",
"steal-stache"
],
"envs": {
"server-production": {
"renderingBaseURL": "/dist"
}
},
"serviceBaseURL": ""
},
"dependencies": {
"ajax-request": "^1.2.3",
"can-ajax": "^1.1.4",
"can-component": "^3.3.10",
"can-connect": "^1.5.9",
"can-define": "^1.5.5",
"can-route": "^3.2.3",
"can-route-pushstate": "^3.1.2",
"can-set": "^1.3.2",
"can-stache": "^3.11.1",
"can-view-autorender": "^3.1.1",
"can-zone": "^0.6.13",
"done-autorender": "^1.4.0",
"done-component": "^1.0.0",
"done-css": "^3.0.1",
"done-serve": "^1.5.0",
"generator-donejs": "^1.0.7",
"http-parser-js": "^0.4.10",
"lodash": "^4.17.5",
"steal": "^1.5.15",
"steal-less": "^1.2.0",
"steal-stache": "^3.1.2"
},
"devDependencies": {
"can-fixture": "^1.1.1",
"donejs-cli": "^1.0.0",
"funcunit": "^3.2.0",
"steal-qunit": "^1.0.1",
"steal-tools": "^1.9.1",
"testee": "^0.3.0"
},
"license": "MIT"
}
The app has been scaffolded with the usual donejs cli commands:
donejs add app abc
By doing so SSR is by default active which is not desired in my particular case.
Is there a configuration switch to disable this behaviour?

How to make electron work with sqlite3?

I have tried everything, can't get it to work. I get this error:
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "main.js",
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"repository": "https://github.com",
"keywords": [
"test"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "~1.6.2",
"electron-rebuild": "^1.5.11"
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"electron-fetch": "^1.0.0-aplha4",
"electron-handlebars": "^1.0.0",
"electron-prebuilt": "^1.4.13",
"electron-rebuild": "^1.5.11",
"electron-sqlite3": "^0.0.3",
"font-awesome": "^4.7.0",
"jquery": "^3.2.0",
"sqlite3": "^3.1.8"
}
}
In the code I use:
const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database(':memory:');
Any ideas how to make this work?

Have you already run sqlite3 through electron-rebuild?
$ electron-rebuild -f -w sqlite3
or
$ npm rebuild