I have decided to make the switch from ts-loader to swc-loader based on the guidance provided in this article. However, after completing the migration, I am encountering an issue where basic Typescript errors are not being displayed in the console. For instance, the IDE is able to detect errors in the following line:
https://i.sstatic.net/kqfRN.png
But when using SWC, the result indicates that everything is fine (even though it is not):
https://i.sstatic.net/zulcA.png
I would like to configure SWC to display errors in the console. When I switch back to using ts-loader, the errors are properly shown along with the line in which they occur:
https://i.sstatic.net/kzAuU.png
Here is the content of my webpack.config.js:
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...
]
}