Karma, ts-loader and sourcemaps

[johnnyreilly]

Heya,

I've just noticed that ts-loader doesn't seem to support sourcemaps when used with Karma. You can see this for yourself by following these steps:

1 - Clone this repo: https://github.com/johnnyreilly/globalize-so-what-cha-want

2 - Enter these commands:

npm install
npm run watch-demo

3 - Goto http://localhost:9876/ in your browser (I'm using Chrome), click the "DEBUG" button on the right. In the new tab hit F12 and open up the dev tools. Marvel at the original webpack code rather than the original source:

Feel sad.

I don't think this has anything to do with #59 - that's the only issue I found related to sourcemaps.

Does anyone have any idea why this might be happening?

[jbrantly]

OK! I looked at this for entirely too long this evening (but I didn't want it to beat me! 😁)

I was able to confirm that the output of webpack did not include inlined source map information. I have not yet been able to figure out why. I don't believe it's the fault of any of the loaders. Source map information is being made available to webpack. In fact, if you use eval-source-map instead then it works in Chrome (although I noticed that stack traces were still messed up for errors). So I'm not sure.

[johnnyreilly]

For what it's worth, using babel-loader alone the sourcemap works as expected. (I've been porting a work project from using es6 with babel-loader to using ts-loader with babel-loader)

[johnnyreilly]

For now I've switched to eval-source-map which initially looks pretty good.

[jbrantly]

I half-heartedly tried just using babel-loader. I'll try that again. I also forgot to try out v0.6.0 of ts-loader which did have a change to source maps.

[robak86]

Hi, any progress with that issue ? I can confirm that sourcemaps are also missing when using v0.6.1 of ts-loader. I've also noticed that ts-loader generated sourcemaps don't have "sourceRoot" property. Maybe these two things are somehow related ?

[rschmukler]

Just chiming in on this again, eval-source-map works to get sourcemaps in chrome, although the stack traces are still screwed up when reported back to Karma. Any body have any ideas / a work around?

[rrecaredo]

Indeed eval-source-map brings source-maps to chrome. However if you set a breakpoint it doesn't stop there, any ideas?

[johnnyreilly]

I got this working by using devtool: 'inline-source-map' and this files refernce:

     files: [
      // This ensures we have the es6 shims in place from babel and that angular and angular-mocks are loaded
      // and then loads all the tests
      'test/main.js'
    ],

where test/main.js is:

/* eslint-disable */
import 'babel-polyfill';

const testsContext = require.context('./', true, /\.tests\.ts(x?)$/);
testsContext.keys().forEach(testsContext);

You can see a working setup here: https://github.com/johnnyreilly/proverb-signalr-react

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing as stale. Please reopen if you'd like to work on this further.