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:
But the result returned by SWC shows it's all right (which is not!):
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:
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...
]
}
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.