Is source-map-loader necessary for the typescript example?

[johnnyreilly]

In the webpack / typescript documentation it says that the source-map-loader is necessary for sourcemaps to work. I don't believe it is (I've been happily debugging TypeScript with sourcemaps and webpack for about 2 years now). I was just curious if I was missing anything? As far as I know this section:

 module: {
   rules: [
     {
       enforce: 'pre',
       test: /\.js$/,
       loader: "source-map-loader"
     },
     {
       enforce: 'pre',
       test: /\.tsx?$/,
       use: "source-map-loader"
     }
   ]
 },

Isn't necessary at all.

You just need "sourceMap": true in the tsconfig.json and devtool: 'inline-source-map' in the webpack.config.js.

I just wanted to know if there was anything else source-map-loader brings to the party? AFAIK this isn't required...

[skipjack]

Related #969

[skipjack]

Can you take a look at the changes in #969 and let me know if the guide is valid so we can push it forward?

[johnnyreilly]

The changes in #969 look valid to me - I don't think source-map-loader is required.

[donaldpipowitch]

I followed the guide, but run Babel after TypeScript and it looks I can only get the source map for my code after TypeScript run.

E.g. I have a file like this (foo.tsx):

import React from 'react';
import { NameComponent, ImageTestComponent } from 'some-module';

/**
 * This is our app component.
 */
export const AppComponent = () => (
  <div>
    <NameComponent a={1} b={2} name="foo" />
    <ImageTestComponent />
    {
      process.env.NODE_ENV === 'production'
        ? <p>Production Build</p>
        : <p>Dev Build</p>
    }
  </div>
);
console.log('test');

'test' is logged correctly to the console and it shows foo.tsx:9 (correct name, wrong line). Clicking on foo.tsx shows this file:

import React from 'react';
import { NameComponent, ImageTestComponent } from 'some-module';
/**
 * This is our app component.
 */
export var AppComponent = function AppComponent() {
    return React.createElement("div", null, React.createElement(NameComponent, { a: 1, b: 2, name: "foo" }), React.createElement(ImageTestComponent, null), process.env.NODE_ENV === 'production' ? React.createElement("p", null, "Production Build") : React.createElement("p", null, "Dev Build"));
};
console.log('test');


//////////////////
// WEBPACK FOOTER
// ./src/foo.tsx
// module id = 84
// module chunks = 0

(Here is the console.log on line 9.)

Any idea why? I'd love to see the content and line from ./src/app.tsx as mentioned in the "footer". (What is this anyway?) Can't find anything about this in the docs.

[johnnyreilly]

Do you have these set correctly?

You just need "sourceMap": true in the tsconfig.json and devtool: 'inline-source-map' in the webpack.config.js.

If you'd like to share your setup I'll give any advice I can.

In case it helps: https://github.com/TypeStrong/ts-loader/blob/master/examples/react-babel-karma-gulp/webpack.config.js with devtool = 'inline-source-map' added is pretty much what I run with...

[donaldpipowitch]

Well you can check out our setup, but it's quite big. We have a similar tool like create-react-app called ws (linked to v2 branch). It also contains examples.

The webpack config for an single page app is created here.

Already cloned ts-loader earlier today, because of the examples 😄 Will try out react-babel-karma-gulp.

Update

Yeah, react-babel-karma-gulp seems to work. I try to find a difference between the two setups :/

[johnnyreilly]

Great - thanks for reporting back. Be great to hear what the difference is (if you find it)

[johnnyreilly]

BTW you might find the fork-ts-checker-webpack-plugin / happypack examples useful if you'd like faster build times. I'm planning to blog about these but haven't got round to it yet

[donaldpipowitch]

Found the bug Va1/string-replace-loader#28.