24

I found a problem in my app structure and build process using WebPack, TypeScript, and TS-Loader that I thought was caused by TypeScript 2.1.4, but apparently was there the whole time.

You can see all the details from my other post: TypeScript 2.1.4 breaking changes in webpack ts-loader

In short, I have Gulp and WebPack set to an entry point of /client/app.ts which for now has almost nothing in it (certainly nothing referencing /server/) but the TypeScript compilation stage of the WebPack build process is still trying to run on /server (and in my other post, showing a compilation error from the Server folder, when it should only be running from the Client folder).

What am I doing wrong and how can I fix it so it only runs on /client/.ts files, and specifically walk the structure from app.ts?

Here's my repo showing everything I'm working with so far: https://github.com/CmdrShepardsPie/test-ts-app/tree/develop

Thanks

  • Looking at your other question - I would remove gulp entirely from your project. It doesn't look like it's giving you any benefit and only adds confusing to the build pipeline – Andy Ray Dec 22 '16 at 18:24
  • You can exclude paths from loaders with `exclude: /server\//` in the loader config – Andy Ray Dec 22 '16 at 18:26
  • I'm using Gulp to compile the server, I'll add a link to the repo to my question for full reference. –  Dec 22 '16 at 18:29
  • I wouldn't think I'd need to include/exclude anything if I'm passing in the path and/or files to work on specifically. –  Dec 22 '16 at 18:35
  • Why not use webpack alone to compile the server? – Andy Ray Dec 22 '16 at 21:06
  • @AndyRay I can do that? (New to webpack here) if you'll check out my gulp file, I'm running node afterwords and refreshing it when it changes. –  Dec 23 '16 at 14:07
  • @ChrisSimpson did you ever work this out? I'm experiencing exactly the same, I'd have expected that the TS files wouldn't all be compiled, but apparently this is because the typescript compiler does that (see: https://github.com/s-panferov/awesome-typescript-loader/issues/359 , this references awesome-typescript-compiler but the concept is the same) ... – Dave Goodchild Aug 14 '17 at 10:40
  • I'm a bit late, but I've just run into the exact same problem with both `ts-loader` and `awesome-typescript-loader`. The solution (perhaps slightly inelegant, but easy) is to create an empty .ts file anywhere and specify that as the `input` in `tsconfig.json`. This way tsc will process the files from the webpack loader _and_ this empty file each time it's invoked, but it'll leave the other files alone. – user4520 Oct 29 '17 at 12:03
  • What helped a lot for me was switching my monorepo setup to use Typescript Project References, as [described here](https://stackoverflow.com/a/61467483/2441655). Took some work to get it set up, but everything works together smoothly now. – Venryx Jun 30 '21 at 00:04

1 Answers1

50

You can work around this bug by specifying the option onlyCompileBundledFiles in your webpack.config.js like so

module: {
    rules: [
        {
            test: /\.tsx?/,
            use: [{loader: 'ts-loader', options: {onlyCompileBundledFiles: true}}],
        }
    ],
},

I still find it astonishing that ts-loader is broken by default, but at least there's a workaround.

Antimony
  • 37,781
  • 10
  • 100
  • 107
  • 4
    This is the answer. Thank you. – pwray Mar 16 '18 at 01:54
  • 1
    Thanks for this, this solves an issue I was having where my entire Express application (built in TypeScript) was being included into my public directory (where Webpack compiles to) rather than just my outputted bundle. – tomhughes Apr 26 '18 at 16:11
  • 4
    Just an update, it is now 2020 and ts-loader STILL exhibits this silly behavior. Why it auto-compiles ALL ts files is beyond me but this is the world we live in, apparently. Bonkers. – dudewad Jan 13 '20 at 20:28
  • 1
    Thanks @dudewad for confirming in 2020 - I was also about to uninstall everything to find this bug – Cameron Mar 28 '20 at 04:54
  • Amazing this is still broken 3 years later. – Chris Hawkes Sep 14 '20 at 21:11
  • Keep in mind that this breaks compatibility with global .d.ts files or other type definitions that are not part of your imported files. – Guido Bouman Jan 27 '21 at 15:27