0

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...
    ]
}

2 Answers 2

1

You can also use fork-ts-checker-webpack-plugin for async TS checking

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


plugins: [
    new ForkTsCheckerWebpackPlugin({
        typescript: {
            mode: 'readonly',
        }
    }),
]
0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.