Include working sourcemaps in dist
See original GitHub issueFullCalendar includes sourcemaps but there are multiple problems that prevent them from being useful, especially with file-based debuggers like VSCode:
- the copyright/license banner added by gulp to the bundle file after sourcemaps are generated throws off line numbering
- the original TS source files are not included in FullCalendar npm packages. This means that file-based debuggers like VSCode won’t be able to fully use debugging features, like setting breakpoints on FullCalendar files when the debugger is not running.
- even if the files were installed, the
sources
array in the sourcemap points to paths that don’t exist when FullCalendar is installed from npm, which will also break VSCode debugging. For example, below is the first few lines of the 4.2 sourcemap (https://unpkg.com/@fullcalendar/core@4.2.0/main.js.map), showing paths like"../../src/core/util/dom-manip.ts"
that point to the build-time paths, not real paths under the npm install directory of any FullCalendar package.
{
"version":3,
"file":"main.js",
"sources":[
"../../src/core/util/dom-manip.ts",
"../../src/core/util/geom.ts",
"../../src/core/util/scrollbars.ts",
"../../src/core/util/dom-geom.ts",
"../../src/core/util/dom-event.ts",
To repro:
- Using VSCode, open any app that installed FullCalendar from npm
- Debug the app, setting a breakpoint in app code that calls into FullCalendar
- Step into that call. You might have to Step Into several times to get past the module-loading shims.
Expected: Debugger shows the first line of the method in the original TS source file Actual: Debugger shows a line in a transpiled JS file. If you manually copy source files into the folders expected by the sourcemap, then the debugger will show the wrong line in a TS file.
I’ve built a PR that will address these problems. Will file it shortly.
P.S. - to clarify, sourcemaps for debugging FullCalendar itself (for contributors) probably work just fine. The problem is when developers who use FullCalendar as a dependency want to debug into it.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Should I Use Source Maps in Production? | CSS-Tricks
Typically, source maps are a configuration option from the preprocessor. Here's Babel's options. I believe that with Sass, you don't even have ......
Read more >Troubleshooting Source Maps for JavaScript
To add a dist value to your uploaded source maps, use the --dist flag with sentry-cli or the dist option in our Sentry...
Read more >Source maps and how it works - Ehsan Gazar
Source maps can be convenient during development. They provide better means to debug applications as you can still examine the original code ...
Read more >typescript - Cannot read source map from nonstandard location
I am having trouble getting source maps to work with Webpack and TypeScript, when my sources/bundles are in non standard locations. If they...
Read more >source-map-loader - webpack
The source-map-loader extracts existing source maps from all JavaScript entries. This includes both inline source maps as well as those linked via URL....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
v5, which has just been officially release now has working sourcemaps for all packages
this is now working in v5-beta3! info on the release: https://fullcalendar.io/blog/2020/05/react-ts-v5-beta