swc-loader not showing typescript errors in console

77 Views Asked by At

I'm switching from ts-loader to swc-loader following this bloq. However, after migrating, it fails to show me the most basic Typescript errors in the console. For example, I have the following line that Typescript in the IDE manages to detect:

Problem detected by the IDE

But the result returned by SWC shows it's all right (which is not!):

SWC show no error

I'd like to configure SWC to show the errors in the console. If I switch back to ts-loader It shows properly the errors and the line in which they occurred:

Expected behavior

My webpack.config.js content:

const path = require('path')

// General paths for reusability
const PATHS = {
    src: path.join(__dirname, 'src'),
    output: path.join(__dirname, 'dist')
}

module.exports = {
    entry: {
        main: `${PATHS.src}/index.tsx`,
    },
    output: {
        path: PATHS.output,
        filename: '[name]-[contenthash].js',
        clean: true
    },
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'swc-loader',
                    options: {
                        module: {
                            type: 'es6',
                            strict: false
                        },
                        minify: process.env.NODE_ENV !== 'development',
                        isModule: true,
                        jsc: {
                            minify: {
                                compress: true,
                                mangle: true,
                                format: {
                                    asciiOnly: true,
                                    comments: /^ webpack/
                                }
                            },
                            target: 'es2016',
                            parser: {
                                syntax: 'typescript',
                                tsx: true,
                                decorators: true
                            },
                            transform: {
                                react: {
                                    runtime: 'automatic'
                                }
                            }
                        }
                    }
                }
            },
            // Some loaders for CSS and images
        ]
    },
    plugins: [
        // Some plugins...
    ]
}
1

There are 1 best solutions below

0
Genarito On BEST ANSWER

According to one of the creators of the project, this is not possible (source). Probably the best one can do with the Typescript projects is to use ts-loader on dev workspaces, and then use SWC on production settings and minification.