tsloader needs to support System.import(Webpack supports it now)

[fisherspy]

Currently Webpack 2 supports System.import now! However combing with typescript&tsloader, it will show "Cannot find name 'System'"..

[jbrantly]

TypeScript doesn't (yet) understand System.import natively. However, you can bend TypeScript to your will in this case. First off, just to make sure, if you're wanting to load modules normally then you wouldn't use System.import, you would use import ... from '...' (which TypeScript fully supports). The only reason to use System.import is for lazy-loading modules at run-time. There is a test that demonstrates lazy-loading in TypeScript and webpack at https://github.com/TypeStrong/ts-loader/tree/master/test/codeSplitting. In that example we're using CJS require, so there is a require.d.ts file that defines require() which is then used in the lazy load portion of the example. You could take the same exact code, switch out require.d.ts with a definition file that defines System.import (like the one at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/systemjs/systemjs.d.ts) and then instead of require use System.import. TypeScript will be happy, and then theoretically webpack2 can take it from there.

[jbrantly]

Closing this as a question, but feel free to reopen if you are experiencing an issue.

[RickCarlino]

@jbrantly It looks like both links have moved. Are they still available?

[jbrantly]

Can't speak to the DefinitelyTyped stuff but the codesplitting example is still available at https://github.com/TypeStrong/ts-loader/tree/master/test/comparison-tests/codeSplitting

[mikemorton]

@jbrantly is there a def we can pull in from DefinitelyTyped that defines require like that? Or is there a source for the require.d.ts you provide?

[jbrantly]

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/systemjs/index.d.ts seems like it has System.import. The problem is System.import is going away in favor of a native dynamic import function. TypeScript doesn't yet support this but should sometime in the future: microsoft/TypeScript#12364

For now I've personally just used a function called _import which has a definition like:

declare function _import(specifier: any): Promise<any>;

Then I use a chained loader after ts-loader like so:

{
  // a hack until TypeScript supports the ES2015 Loader dynamic import syntax
  loader: 'string-replace-loader',
   options: {
    search: /_import\(/g,
    replace: 'import('
  }
}

This is all for webpack2, which supports the dynamic import function.

[hulkish]

@jbrantly this seems really hacky to me. Why can't import() just be supported out of the box?

[jbrantly]

It can and will be once TypeScript supports it. See linked issue above.