Source maps appear to be broken?

[DanHarman]

Hi,

It seems that source maps don't work properly with this plugin.

e.g.

\\ test.tsx
import * as React from 'react';

const Test: React.SFC = () => (
    dsfsdfds
    <div>
        asdfsd
        <h1>Hello Typescript</h1>
    </div>
);

export default Test;

generates the following error:

Error in ./pages\test.tsx
Module build failed: SyntaxError: c:/Repos/outlook-playground/tickethub/pages/test.tsx: Unexpected token (4:29)
  2 |     < div >
  3 |     asdfsd
> 4 |     < h1 > Hello), Typescript, h1;
    |                              ^
  5 |  >
  6 | ;
  7 | div >
    at Parser.pp$5.raise (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp$1.parseVar (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:2342:12)
    at Parser.pp$1.parseVarStatement (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:2169:8)
    at Parser.pp$1.parseStatement (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:1861:19)
    at Parser.parseStatement (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:5910:22)
    at Parser.pp$1.parseBlockBody (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:2268:21)
    at Parser.pp$1.parseTopLevel (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:1778:8)
    at Parser.parse (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:1673:17)
    at parse (c:\Repos\outlook-playground\tickethub\node_modules\babylon\lib\index.js:7305:37)
    at File.parse (c:\Repos\outlook-playground\tickethub\node_modules\babel-core\lib\transformation\file\index.js:517:15)
    at File.parseCode (c:\Repos\outlook-playground\tickethub\node_modules\babel-core\lib\transformation\file\index.js:602:20)
    at c:\Repos\outlook-playground\tickethub\node_modules\babel-core\lib\transformation\pipeline.js:49:12
    at File.wrap (c:\Repos\outlook-playground\tickethub\node_modules\babel-core\lib\transformation\file\index.js:564:16)
    at Pipeline.transform (c:\Repos\outlook-playground\tickethub\node_modules\babel-core\lib\transformation\pipeline.js:47:17)
    at c:\Repos\outlook-playground\tickethub\node_modules\awesome-typescript-loader\src\index.ts:163:50
ERROR in ./pages/test.tsx
Module build failed: SyntaxError: c:/Repos/outlook-playground/tickethub/pages/test.tsx: Unexpected token (4:29)

I'm not sure if this is fixable when going through typescript -> babel? I think it's probably related to babel/babel#5408 ?

This originally came up when doing some work on https://github.com/aspnet/JavaScriptServices and the solution there was to drop using babel at all, which also had the benefit of speeding up the build. I'm not sure that's feasible with next.js?

[DanHarman]

Hmm actually seems ok on other testing so closing for now.

[saitonakamura]

@DanHarman sorry for the late reply. I tested it and got the same result, but I guess parser or lexer just got mad. When I tried to do more simple syntax errors, I also got pretty good results. Regarding disable of the babel, I'm not sure if we can safely disable it (need to look for some specific to next plugins, presets etc., something that can't be done through typescript), but one the purpose of the at-loader is integration with babel (they use the same AST cache), so that seems like a perfect case for next. I also tried to speed up the compilation time as much as possible, so I enabled cache, forced isolated modules and disabled the checker by default.