question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Include working sourcemaps in dist

See original GitHub issue

FullCalendar 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:

  1. Using VSCode, open any app that installed FullCalendar from npm
  2. Debug the app, setting a breakpoint in app code that calls into FullCalendar
  3. 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:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
arshawcommented, Jun 22, 2020

v5, which has just been officially release now has working sourcemaps for all packages

1reaction
arshawcommented, May 20, 2020

this is now working in v5-beta3! info on the release: https://fullcalendar.io/blog/2020/05/react-ts-v5-beta

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found