TypeScript 2.1.4 breaking changes in webpack ts-loader

714 views Asked by At

Upgrading from Typescript 2.0.10 to 2.1.4 appears to break something in webpack, webpack-stream, ts-loader, or gulp as it’s no longer respecting my entry point or gulp source glob. It appears to be including all .ts files in my project (including the ones in the /server source folder) rather than just the ts files in /client and app.ts as per the gulp.src and web pack entry point. Is there a different/newer/better way I should be doing this?

in gulp file:

const serverPath = 'server';
const clientPath = 'client';
const buildPath = 'build';
const paths = {
    server: {
        scripts: [
            `${serverPath}/**/*.ts`
        ]
    },
    client: {
        files: [
            `${clientPath}/**/*`
        ],
        scripts: [
            `${clientPath}/**/*.ts`
        ],
        entry: `${clientPath}/app.ts`
    }
};


gulp.task('build:client', cb => {
    gulp.src(paths.client.entry)
        .pipe(webpackStream(webpackConfig, webpack))
        .pipe(gulp.dest(`${buildPath}/${clientPath}`));
    cb();
});

in web pack config:

entry: {
    app: './client/app.ts'
}

ts: {
    configFileName: './tsconfig.json'
}

resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
}

module: {
    loaders: [
        { test: /\.ts$/, loader: 'ng-annotate-loader!ts-loader' }
    ]
}

in tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "removeComments": false,
        "noImplicitAny": true,
        "sourceMap": true,
        "inlineSources": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

Output using 2.0.10:

ts-loader: Using [email protected] and /Users/chris/code/class-app/tsconfig.json
[20:47:36] Version: webpack 1.14.0
Asset       Size  Chunks             Chunk Names
app.js.map  950 bytes       0  [emitted]  app
app.js  550 bytes       0  [emitted]  app

Output using 2.1.4:

ts-loader: Using [email protected] and /Users/chris/code/class-app/tsconfig.json
server/api/thing/thing.controller.ts(17,16): error TS2322: <ts error in server portion, not relevant>
[20:53:03] TypeScript: 1 semantic error
[20:53:03] TypeScript: emit succeeded (with errors)
Unhandled rejection Error in plugin 'webpack-stream'
Message:
/Users/chris/code/class-app/server/api/thing/thing.controller.ts <same as above>
1

There are 1 answers

0
AudioBubble On

Apparently the problem is TypeScript in WebPack has been running on the server code this whole time (although it shouldn't have been) and although I had planned to fix the server TS issue that upgrading TypeScript introduced, what it really exposed was WebPack was compiling files it shouldn't have all along. Tested this by intentionally introducing a problem to the server ts on the previous ("working") version of TypeScript, getting the same error.

I still need to figure out why it's trying to compile all my TS files, and not just the ones in /client, but I'll ask a new question for that.