Develop Reference

Parcel Bundler beautify, lint, and create .min.js

I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files

Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.

Next.js Scripts Error: Cannot find module '../../webpack-runtime.js'

I want to create RSS script using Next.js.
So I put up a script in a subfolder inside the root folder scripts/ & named it build-rss.js
next.config.js
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.svg$/,
issuer: { and: [/\.(js|ts|md)x?$/] },
use: [
{
loader: '#svgr/webpack',
options: {
prettier: false,
svgo: true,
svgoConfig: { plugins: [{ removeViewBox: false }] },
titleProp: true,
},
},
],
})
if (!options.dev && options.isServer) {
const originalEntry = config.entry
config.entry = async () => {
const entries = { ...(await originalEntry()) }
entries['./scripts/build-rss'] = './scripts/build-rss.js'
return entries
}
}
if (!options.isServer) {
config.resolve.fallback.fs = false
}
return config
},
}
When I try to run my script npm run build:development which in package.json represents:
"scripts": {
"clean": "rimraf .next",
"dev": "next dev",
"export": "next export",
"start": "next start",
"lint": "next lint",
"build:development": "next build && npm run export && npm run rss:development",
"build": "next build && npm run export && npm run rss",
"rss:development": "node ./.next/server/scripts/build-rss.js",
"rss": "node ./.next/serverless/scripts/build-rss.js"
}
It throws an error saying:
Error: Cannot find module '../../webpack-runtime.js'
But I checked. The file does exist.
The blunder is this used to work earlier. Probably few versions ago when my other project used the same combination.
I have made a complete reproduction showcasing the error → https://github.com/deadcoder0904/next-script-rss-error
Just clone it, install it & try the script npm run build:development in the terminal to see the error.

Based on our conversation:
entry: path.join(__dirname, '..', 'path/to/file')
That's what a webpack entry looks like. It can also be an array or an object:
entry: [
path.join(__dirname, '..', 'path/to/file'),
// other entries here
]
Whereas you're already getting the whole webpack config:
webpack: (config, options)
So doing:
const originalEntry = config.entry
config.entry = async () => {
const entries = { ...(await originalEntry()) }
entries['./scripts/build-rss'] = './scripts/build-rss.js'
return entries
}
Makes no sense to me if you can just do:
config.entry.push('./scripts/build-rss')
// config.entry['./scripts/build-rss'] = './scripts/build-rss.js'
Unless I miss something with how nextjs is loading the webpack config.
Even then I'd suggest that you use path.join in order to ensure it's loaded to the correct location, because that relative root will execute from wherever webpack is compiled from.
Along with that in your first project you used nextjs v10 and now you're using nextjs v11, which has an upgrade from webpack 4 to 5, which is a major upgrade. I don't know the details, I can only speculate, but under no conditions should you assume that "because your previous project was working this one should using the same stuff", it won't necessarily (especially not in this case).
The first intuitive thing I thought was that webpack should by default bundle everything to a single output file, unless the configuration for that was changed by nextjs (I don't know). So using a script you added to entries didn't make sense to me, because it wouldn't exist. But you're saying that it does exist so I can only assume that webpack is configured to do code splitting and outputs each entry to a different file. In which case I have no idea. As far as I'm aware in webpack 5 (I don't know about webpack 4) code splitting is disabled in dev and enabled in production so your problem is likely a discrepancy between dev and production.
Perhaps the last thing you can try is to change your !options.dev, because right now you're only adding that script when it's production but you're trying to run the script using development.
If you really just have to get it working you can downgrade your nextjs to the previous version you were using (v10), even though that's not really a solution.
Other than that I'm out of ideas.

Not sure if you are still looking for an answer, but simply changing the webpack entry as follows seems to have fixed the problem.
entries['scripts/build-rss'] = './scripts/build-rss.js';
// instead of entries['./scripts/build-rss']

I had the same Error! I deleted the .next Folder and did an npm run dev, It started to work for me!

How to debug Vue application with google chrome

I would like to step away from using console.log all the time and use the Chrome Developer Debug Tool more often.
I found this nice How to stop using console.log() and start using your browser’s debugger about debugging in general (setting breakpoints, executing line by line etc.)
But when I tried to use this in real life – which means to use it in a vue (nuxt) application I am working on – I could not get it to work.
All my files are combined into more complex javascript files, which I cannot debug.
I then found this post:
Debugging .vue component in Chrome
Which I thought would shed light onto this matter, but unfortunately I don't know what to do.
I added this:
configureWebpack: {
devtool: 'source-map'
},
To my nuxt.config.js
But I would not see any sourcemaps of all my .js files in the debugger.
It would be nice if I could find all the js files for each vue component, for each store file, and for other utility files I wrote.
I am not sure if this is even possible, but I guess there must be a way to find my Javascript code within the debugger tool to actually debug it.
Or am I wrong?

Nuxt.js defines sourcemap in build property from nuxt.config.js file:
Step 1:
build: {
extend (config, { isClient }) {
// Extend only webpack config for client-bundle
if (isClient) {
config.devtool = '#source-map'
}
}
}
Step 2: run npm command line again (nuxt will not apply code in nuxt.config.js unlike another page
npm run dev
Step 3: Open chrome , press ctrl + shift + I or press F12 to open source via : ///webpack ...
I found this in this official's url: https://nuxtjs.org/api/configuration-build#extend

Use below configuration in nuxt config file
build: {
filenames: {
chunk: '[name].js'
},
extend(config, ctx) {
const path = require('path');
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
if (ctx.isDev && ctx.isClient) {
config.devtool = '#source-map'
}
}
}
}
Hope it will serve your purpose, and you can use debugger keyword into your javascript code for setting break point by your own intentionally, as well as you can set break point into browser .

For those of you who are trying to debug nuxt and are using typescript. Here are the vs code configs for using nuxt-ts.
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client: chrome",
"url": "http://localhost:{ADD_YOUR_APP_PORT_HERE}",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "server: nuxt",
"args": ["dev"],
"osx": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
},
"linux": {
"program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
}
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": ["server: nuxt", "client: chrome"]
}
]
}
You also will need to enable source maps like this:
// nuxt.config.ts
extend (config: any, ctx: any) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
I wrote a detailed tutorial on my blog : https://mansour.blog/enable-vs-code-debugger-for-nuxt-and-typescript

How do I move jest tests to a /test folder and get them to run?

edit: I'm pretty sure this question is out of date and Jest has changed since then. Don't assume the answers will work or even be relevant now.
Jest expects tests to be in _tests_ folder or to be named blah.test.js. I don't like either of those patterns. I want my test files to be in /test and naming them test/index.ios.test.js seems redundant and silly. My first stab at this is to change my jest config in package.json to be:
"jest": {
"testPathDirs": ["test"],
"testRegex": "\\.(js|jsx)$",
"preset": "react-native"
}
Which find the tests successfully but they all fail:
Cannot find module 'setupDevtools' from 'setup.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:151:17)
at Object.<anonymous> (node_modules/react-native/jest/setup.js:23:1)
That function is in node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js. How do I tell Jest where to find it?

I solved the problem by just setting the regex so it finds all .js files in my ./test folder:
"jest": {
"preset": "react-native",
"globals": {
"__DEV__": true
},
"testRegex": "./test/.*.js$",
"rootDir": "."
},
(jcollum here: I don't know what __DEV__ is actually doing there but an error will be thrown if isn't. jest 17.0.3)

I think the best way to go about this is to configure testMatch. It defaults to:
[ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]
So you could either change __tests__ to tests or add a new entry into the array that checks for both. My use the following in my package.json:
"jest": {
"testMatch": [ "**/tests/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ]
},

I think to set roots: ['<rootDir>/test/'] is simple way in jest.config.js
module.exports = {
roots: ['<rootDir>/test_unit/'],
...
}
It works well for me.

VS Code: "Breakpoint ignored because generated code not found" error

I have looked everywhere and I still have issue debugging TypeScript inside VS Code. I have read this thread but still I am not able to hit my breakpoints placed inside a TypeScript file, hitting the breakpoints in .js files all works fine.
So here is the simplest "hello world" project I have set up.
app.ts:
var message: string = "Hello World";
console.log(message);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
}
]
}
I have generated the js.map files by running the tsc --sourcemap app.ts command.
After all of those steps when I set a breakpoint on the console.log(message); row and launch the program (F5) from the "Debug" tab that breakpoint is grayed out saying "Breakpoint ignored because generated code not found (source map problem?)." I attached a screenshot of what I am observing:
What am I missing?
Edit:
Hi, I am still stuck on this. I managed to make one sample project that was hitting the break points but after I tried to copy that project to a different location on my HDD the break points again became gray and were not hit. What I did different in this test project was to use inline sourcemaps by compiling the TypeScript files with tsc app.ts --inlinesourcemap
I uploaded the mentioned sample project to GitHub so you can take a look at it here.

Setting "outFiles" : ["${workspaceRoot}/compiled/**/*.js"] solved the issue for me.
"outFiles" value should match one set in tsconfig.json for outDir and mapRoot which is ${workspaceRoot} in your case, so try "outFiles": "${workspaceRoot}/**/*.js"
Here are my tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"target": "es6",
"outFiles": ["${workspaceRoot}/compiled/**/*.js"],
"mapRoot": "compiled"
},
"include": [
"app/**/*",
"typings/index.d.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
and launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/compiled/app.js",
"cwd": "${workspaceRoot}",
"outDir": "${workspaceRoot}/compiled",
"sourceMaps": true
}
]
}
Here is small project, where you may see all parameters set https://github.com/v-andrew/ts-template

I came across this question while looking for a solution to a similar problem that I was having. Despite being different from OP's problem, it might help others.
Context: I was following the Visual Studio Code HelloWorld example and found myself unable to stop on break points.
I solved my problem by changing .vscode/launch.json so that "sourceMaps": true attribute under the Launch configuration was set (it starts default on false).

I think the problem might be in your 'program' section of launch.json. Try it like this:
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch",
// Type of configuration.
"type": "node",
"request": "launch",
// Workspace relative or absolute path to the program.
"program": "${workspaceRoot}/app.ts",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": "${workspaceRoot}",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": true,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": "${workspaceRoot}"
}

Facing the same issue and solved it by correcting the path to .ts files.
My project contains src and dist dirs and the problem was that the generated .map files didn't have the correct path to the src dir.
The fix - tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist",
"sourceRoot": "../src"
}
}
Initially, my sourceRoot was pointing to src and there is no src dir inside dist.
Also, sourceMaps should be set to true inside launch.json.

After ripping my hair out all day, I finally got it to work.
The problem is there's three files to fiddle with - launch.json, tsconfig.json, and webpack.config.js so it's all combinatorial.
the diagnosticLogging was key to helping me figure it out.
Microsoft please make this easier... Really, vscode could have figured this out or at least guided me more on the process.
Anyway here's what finally worked in my launch.json:
"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }
my tsconfig.json:
"outDir": "dist",
"sourceMap": true
my webpack.config.js:
output: {
path: 'dist/dev',
filename: '[name].js'
},
...
module: {
loaders: [...],
preLoaders: [{
test: /\.js$/,
loader: "source-map-loader"
}]
}
...
plugins: [
new webpack.SourceMapDevToolPlugin(),
...
],
devtool: "cheap-module-eval-source-map",

Facing the same issue and solved it by correcting "webRoot" config in launch.json.
Here's my workspace's explorer view.
Since the compiling result main.js and main.js.map are in "./project/www/build" directory, I change the "webRoot" entry to "${workspaceRoot}/project/www/build" from "${workspaceRoot}", and it worked!
The launch.json file is as follow:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/project/www/build"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/project/www/build"
}
]
}

None of the other answers worked for me.
I then realised the program attribute in my launch.json was pointing to the .js file, but my project is a TypeScript project.
I changed it to point to the TypeScript (.ts) file, and set the outFiles attribute to point to where the compiled code lives:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/src/server/Server.ts",
"cwd": "${workspaceRoot}",
"outFiles": ["${workspaceRoot}/dist/**/*.js"]
}
This solved the issue for me!

There is really only one way to resolve this and that is to look at the source map path that is actually used.
Add the following line to launch.json:
"diagnosticLogging": true,
Among a lot of other stuff, your console will have lines like these:
SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"
And then you just tweak your sourceMapPathOverrides to make the path match to your actual source path. I've found that I needed slightly different configuration for different projects, so understanding how to debug this really helped.

Late to the party, but you can check this post on github Test globbing support for the outFiles attribute in the launch config #12254.
Basically in the new version of vscode, you must now use the glob pattern with the property outFilesin your task.json.
I had a simlar issue. I fixed by indicating the output dir with outFiles

After a lot of time wasted on resolving this issue, it turned out the best way is to turn on debugging trace by adding the following line in launch.json.
"trace": true
And see where the problem actually is.
Your debug console will output something in the lines of:
Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt
Among a lot of other stuff, your console will have lines like these:
SourceMap: mapping webpack:///./src/index.ts => C:\Some\Path\index.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Some/Path/*"
Use sourceMapPathOverride to fix it to actually match your path. The property "trace" used to be called "diagnosticLogging" which is no longer used.

I changed my config in launch.json for:
{
"name": "Debug tests in Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"sourceMapPathOverrides": {
"*": "${webRoot}/*"
},
"webRoot": "${workspaceRoot}"
}
before was:
{
"name": "Debug tests in Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
Include '"sourceMapPathOverrides"' was my solution

This config in launch.json worked:
{
"type": "node",
"request": "launch",
"name": "Launch Program - app",
"program": "${workspaceRoot}/src/server.ts",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceRoot}/release/**"],
"sourceMaps": true
}

I would like to contribute to spare some hours of head banging.
I used Debugger for Chrome for VS code (you don't need this for webstorm), I would recommend spend 10min reading their page, it will enlighten your world.
After installing the debugger extension, make sure that source-map is installed, in my case I also needed source-map-loader. Check your package.json for that.
My launch.json which is the chrome debugger configuration (all my source files where under src) :
{
// 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": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}/src"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/",
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*"
}
}
]
}
Add devtool: 'source-map' to your webpack.config.js.
Other parameters that generates mapping inlines won't work with Chrome Debugger (they mention that on their page).
This is an example:
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
title: "Tutorial",
inject: "body",
template: "src/html/index.html",
filename: "index.html"
}),
new DashboardPlugin()
],
devtool: 'source-map',
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
query: {
presets: ["es2017", "react"],
plugins: ['react-html-attrs']
}
}
]
},
watch: true
};
Then you run your webpack: `webpack-dev-server --devtool source-map --progress --port 8080, I used webpack-dev-server but it has same options as webpack.
When you do that you must see a .map file of your generated app. If not then come back and verify your setup.
Now in VS Code switch to Debug Console and run .scripts. This is a very useful command because it shows you what generated code is mapped to which source.
Something like this:
- webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)
If this is wrong then you have to verify your sourceMapPathOverrides in your launch.json, examples are available on the extension's page

yes! in my case changing this in launch.json file solve the problem:
"sourceMapPathOverrides": {
"webpack:///./~/*": "${webRoot}/node_modules/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///src/*": "${webRoot}/*",
}

Using Angular I have found that I always point my folder directory to the src folder - that way my work-space is not so cluttered with root files that I never use. But this has given me several problems in the past especially when using VSCode, since many of the functionality seems to me to look at the folder structure, and start from there to run your files. (Expecting some of the missing files)
So I had this exact same problem with this error message, and learning from past experience I realized that I opened my project one folder deep, instead of the root <app name> folder. So I just closed my project and opened it one folder up (so that all the other files are also included in the folder structure) and my problem was immediately fixed.
I also believe that many of the above answers about changing your files and folder structure are workarounds to this problem of not opening your work project at the root folder, what ever framework/language you are using.

I just had to restart my express server and then reattach the debugger.

After reading this thread and trying almost all methods I could find to no avail, I Google'd some more and stumbled upon this weeery interesting change they made in VSCode 1.49.0, in September 2020. In a nuthshell, outFiles does not work as before.
https://github.com/microsoft/vscode/issues/107615

if you switch to visual studio type script project you can debug ts files normally
i think the issue in app.js.map generation file
here is sample from visual studio app.js.map
{"version":3,"file":"app.js","sourceRoot":"","sources":["app.ts"],"names":["HelloWorld","HelloWorld.constructor"],"mappings":"AAAA;IACIA,oBAAmBA,OAAcA;QAAdC,YAAOA,GAAPA,OAAOA,CAAOA;IAEjCA,CAACA;IACLD,iBAACA;AAADA,CAACA,AAJD,IAIC;AAED,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC/C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC"}
vs visual studio code app.js.map
{"version":3,"file":"app.js","sourceRoot":"","sources":["../app.ts"],"names":[],"mappings":"AACA;IACI,oBAAmB,OAAc;QAAd,YAAO,GAAP,OAAO,CAAO;IAEjC,CAAC;IACL,iBAAC;AAAD,CAAC,AAJD,IAIC;AACD,IAAI,KAAK,GAAC,IAAI,UAAU,CAAC,aAAa,CAAC,CAAC;AACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAC3B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC"}
try to replace it and try again don't forget to consider directory hierarchy of sources