Current aws-nodejs-typescript template's webpack.config.js not working correctly

[0v3rst33r]

Bug Report

Description

1. What did you do? Use the latest version of the aws-nodejs-typescript template
2. What happened? When I package the project nothing breaks on local system, but on a system that compiles the project from scratch it gives legit compile error (type error in a specific file).
3. What should've happened? Should have given a compile error
4. What's the content of your serverless.yml file? The contents of this file is not relevant, but it is about the webpack.config.js file: The is the contents that does NOT give the compile error, but it should have (do note this is the latest version):

const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
// const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
    context: __dirname,
    mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
    entry: slsw.lib.entries,
    devtool: slsw.lib.webpack.isLocal ? 'cheap-module-eval-source-map' : 'source-map',
    resolve: {
        extensions: ['.mjs', '.json', '.ts'],
        symlinks: false,
        cacheWithContext: false,
    },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js',
    },
    target: 'node',
    externals: [nodeExternals()],
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            {
                test: /\.(tsx?)$/,
                loader: 'ts-loader',
                exclude: [
                    [
                        path.resolve(__dirname, 'node_modules'),
                        path.resolve(__dirname, '.serverless'),
                        path.resolve(__dirname, '.webpack'),
                    ],
                ],
                options: {
                    transpileOnly: true,
                    experimentalWatchApi: true,
                },
            },
        ],
    },
    plugins: [
        // new ForkTsCheckerWebpackPlugin({
        //   eslint: true,
        //   eslintOptions: {
        //     cache: true
        //   }
        // })
    ],
};

When I roll it back to the previous version, then it gives a compile error which is correct:

const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals')

module.exports = {
    externals: [nodeExternals()],
    mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
    entry: slsw.lib.entries,
    devtool: 'source-map',
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js',
    },
    target: 'node',
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: 'ts-loader' },
        ],
    },
};

1. What's the output you get when you use the SLS_DEBUG=* environment variable (e.g. SLS_DEBUG=* serverless deploy)

[parimalyeole1]

Serverless aws-nodejs-typescript template is not giving compile error while running

• sls offline start
• sls package

Versions on my system: Framework Core: 2.15.0 Plugin: 4.3.0 SDK: 2.3.2 Components: 3.4.3

Use this command to create typescript basic project serverless create --template aws-nodejs-typescript --path myTypescriptService

This code has compile error but I can still do

• severless deploy

@medikoo @0v3rst33r any luck with this

---

With ref to this Merge Request : https://github.com/serverless/serverless/pull/6904

@khaledosman, @pmuens Do you have any idea or suggestion about above issue.

Thanks

[khaledosman]

I believe this is a type-checking error, the webpack config has transpileOnly option set to true for ts-loader, which makes it skip type-checking

The idea was to use fork-ts-checker-webpack-plugin instead which runs type-checking on a different process which speeds up typechecking and webpack compilation. during local development this is not necessary thanks to vscode's built-in typescript support which can catch most issues in realtime anyway.

@parimalyeole1 @0v3rst33r can you try with this part uncommented from webpack? with or without eslint depending on your project setup

    plugins: [
        // new ForkTsCheckerWebpackPlugin({
        //   eslint: true,
        //   eslintOptions: {
        //     cache: true
        //   }
        // })
    ],
    ```

[parimalyeole1]

@khaledosman,

Thanks for quick reply 🙏 .

plugins: [new ForkTsCheckerWebpackPlugin()], this simple config work fine with ts-loader. Link: https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/master/examples/ts-loader/webpack.config.js

eslint setup alslo works fine with this configuration

plugins: [
   new ForkTsCheckerWebpackPlugin(),
   {
     eslint: {
       enabled: true,
       files: 'app/**/*.ts', 
     },
   },
 ],

With this type-checking issue solve for this 2 commands

• sls deploy
• sls package

sls offline start also shows type error but even if there is any typescript issue offline server still start normally. But this is acceptable as for faster developer experience.

Thanks for making typescript setup simpler with this PR https://github.com/serverless/serverless/pull/6904