While working on an old project, I decided to set up Typescript and Webpack. However, I ran into a sudden error:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
So, I created a new project from scratch with the following setup:
webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
entry: {
main: './src/index.ts'
},
module: {
rules: [
{
test: '/\.ts$',
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-typescript'
]
}
},
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts'],
},
plugins: [
new webpack.CleanPlugin(),
],
output: {
filename: '[name].[contenthash].js',
path: path.join(__dirname, 'dist')
},
}
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"rootDir": "src",
"outDir": "dist",
"lib": ["ES6", "DOM"],
"target": "es5",
"module": "es6",
"noImplicitAny": true,
"removeComments": true
}
}
src/index.ts (sourced from here)
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
greeter.greet();
Surprisingly, I encountered the same error again :/
ERROR in ./src/index.ts 2:12 Module parse failed: Unexpected token (2:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I feel like I'm missing something crucial here. Any idea what it could be?
ps: I also tried using different loaders like ts-loader and awesome-typescript-loader.
Your help is highly appreciated! Thanks in advance!