Despite successfully generating sourcemaps from my build process using browserify with gulp, I encountered issues when trying to debug. Breakpoints would often jump to different lines in Chrome, indicating that the script was not pausing where it should. Additionally, hovering over variables displayed incorrect values. I followed a tutorial as a reference, so it should theoretically work.
The key part of my gulpfile.js for the build step is:
return browserify({
basedir: '.',
debug: mode === 'dev',
entries: [`${paths.src}/app/${buildConfig.appFolder}/${buildConfig.appSrc}`],
cache: {},
packageCache: {},
})
.plugin(tsify)
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest(`${paths.dist}/app/${buildConfig.appFolder}`))
.on('error', err => {
console.error(err.toString());
done(err);
});
Furthermore, my tsconfig.json looks like this:
{
"compilerOptions": {
"lib": ["es2018", "dom"],
"target": "es2015",
"jsx": "react",
"moduleResolution": "node",
"diagnostics": true,
"types": [
"react",
"react-dom",
"lodash"
]
}
}