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
Related
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"
]
}
I learn React and JavaScript.
After running npm install I see that react and react-dom is in my node_modules, why is that?
I have a small problem when using the library component that I get duplicate react error.
So I try to learn how to fix this
here is the package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "src/index.js",
"module": "dist/notistack.esm.js",
"types": "src/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.12.3",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
My electron app is in its final stage where I try to use electron-forge to make it into an executable. Running it through npm run start gave no problem, however when running npm run make new errors came up. I fixed all until this absurd error came up.
An unhandled rejection has occurred inside Forge: Error: The main entry point to your app was not found. Make sure "C:\Users\Admin\Documents\Programming\Lucrative Projects\studyplanner\src\main.js" exists and does not get ignored by your ignore option
What makes this absurd is that the file indeed exists...
Furthermore nothing in the package.json would indicate that something is ignored.
"name": "studyplanner",
"version": "1.0.0",
"description": "My electron app",
"main": "./src/main.js",
"scripts": {
"start": "electron-forge start",
"dev": "webpack --watch && electron .",
"build": "rimraf ./public && mkdir public && webpack --progress -p",
"package": "electron-forge package",
"make": "electron-forge make"
},
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#electron-forge/cli": "^6.0.0-beta.60",
"#electron-forge/maker-deb": "^6.0.0-beta.60",
"#electron-forge/maker-rpm": "^6.0.0-beta.60",
"#electron-forge/maker-squirrel": "^6.0.0-beta.60",
"#electron-forge/maker-zip": "^6.0.0-beta.60",
"#electron-forge/plugin-webpack": "^6.0.0-beta.60",
"#vercel/webpack-asset-relocator-loader": "^1.7.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "6.3.2",
"css-loader": "3.6.0",
"electron": "9.3.1",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "6.2.0",
"html-webpack-plugin": "4.5.0",
"node-loader": "^2.0.0",
"postcss": "7.0.32",
"postcss-cssnext": "3.1.0",
"postcss-import": "12.0.1",
"postcss-load-config": "2.1.0",
"postcss-loader": "3.0.0",
"postcss-nesting": "7.0.1",
"rimraf": "3.0.2",
"style-loader": "1.2.1",
"url-loader": "4.1.0",
"webpack": "4.43.0",
"webpack-cli": "3.3.12"
},
"dependencies": {
"#babel/cli": "^7.14.8",
"#babel/node": "^7.14.9",
"#babel/register": "^7.15.3",
"axios": "^0.21.1",
"babel-jest": "^27.1.0",
"babel-preset-react": "^6.24.1",
"classnames": "2.2.6",
"dotenv": "8.2.0",
"electron-squirrel-startup": "^1.0.0",
"express": "4.17.1",
"morgan": "^1.10.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"regenerator-runtime": "^0.13.9"
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "studyplanner"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
],
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.js",
"name": "main"
}
]
}
}
]
]
}
}
}
I looked in common.js where the error arose. I tried replacing line 155's if (!(await fs.pathExists(mainScript))) with if (!(await fs.pathExists(originalMainScript))) but that only made an out without any files in resources/app, only some in .webpack. Hopefully this error is not due to the out folder not generating the content.
replace the main in package.json with .webpack/main
I had a similar problem when main.js was not contained in a subdirectory below the directory containing package.json. The solution that worked for me was to create a symbolic link to main.js in a subdirectory. This seems to be a requirement of electron-forge.
To make it work for me, I had to remove the ./ from the start of my main declaration. So for you it would read "main": "src/main.js"
This is weird because it reports the file path correctly in the error message
Okay so my npm audit requires me to review this file manually and it apparently needs the newest version of axios(0.21.1) so how can I rebuild it?
This is the error btw:
Visit https://go.npm.me/audit-guide for additional guidance
High Server-Side Request Forgery
Package axios
Patched in >=0.21.1
Dependency of apify
Path apify > apify-client > axios
{
"_from": "axios#^0.20.0",
"_id": "axios#0.20.0",
"_inBundle": false,
"_integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
"_location": "/apify-client/axios",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "axios#^0.20.0",
"name": "axios",
"escapedName": "axios",
"rawSpec": "^0.20.0",
"saveSpec": null,
"fetchSpec": "^0.20.0"
},
"_requiredBy": [
"/apify-client"
],
"_resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
"_shasum": "057ba30f04884694993a8cd07fa394cff11c50bd",
"_spec": "axios#^0.20.0",
"_where": "C:\\Users\\Janek\\Desktop\\apify7\\my-new-project\\node_modules\\apify-client",
"author": {
"name": "Matt Zabriskie"
},
"browser": {
"./lib/adapters/http.js": "./lib/adapters/xhr.js"
},
"bugs": {
"url": "https://github.com/axios/axios/issues"
},
"bundleDependencies": false,
"bundlesize": [
{
"path": "./dist/axios.min.js",
"threshold": "5kB"
}
],
"dependencies": {
"follow-redirects": "^1.10.0"
},
"deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
"description": "Promise based HTTP client for the browser and node.js",
"devDependencies": {
"bundlesize": "^0.17.0",
"coveralls": "^3.0.0",
"es6-promise": "^4.2.4",
"grunt": "^1.0.2",
"grunt-banner": "^0.6.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-eslint": "^20.1.0",
"grunt-karma": "^2.0.0",
"grunt-mocha-test": "^0.13.3",
"grunt-ts": "^6.0.0-beta.19",
"grunt-webpack": "^1.0.18",
"istanbul-instrumenter-loader": "^1.0.0",
"jasmine-core": "^2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-ajax": "^0.1.13",
"karma-opera-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sauce-launcher": "^1.2.0",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"load-grunt-tasks": "^3.5.2",
"minimist": "^1.2.0",
"mocha": "^5.2.0",
"sinon": "^4.5.0",
"typescript": "^2.8.1",
"url-search-params": "^0.10.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"homepage": "https://github.com/axios/axios",
"jsdelivr": "dist/axios.min.js",
"keywords": [
"xhr",
"http",
"ajax",
"promise",
"node"
],
"license": "MIT",
"main": "index.js",
"name": "axios",
"repository": {
"type": "git",
"url": "git+https://github.com/axios/axios.git"
},
"scripts": {
"build": "NODE_ENV=production grunt build",
"coveralls": "cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
"examples": "node ./examples/server.js",
"fix": "eslint --fix lib/**/*.js",
"postversion": "git push && git push --tags",
"preversion": "npm test",
"start": "node ./sandbox/server.js",
"test": "grunt test && bundlesize",
"version": "npm run build && grunt version && git add -A dist && git add CHANGELOG.md bower.json package.json"
},
"typings": "./index.d.ts",
"unpkg": "dist/axios.min.js",
"version": "0.20.0"
}
You can just use the command npm install axios and it will automatically update axios and the package.json for you.
This worked for me:
$ npm uninstall axios
$ npm i axios --save
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?