I had a project set up and I am using Babel loader to compile both js and tsx files. While compiling I am facing following errors like
Module parse failed: The keyword 'interface' is reserved (1:15)
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 Even tried ts-loader but same error is being repeated. Can some one help me here?
Here are my configuration files
webpack.config.js (just providing required ones)
// Loaders
module: {
rules: [
{
test: /\.(ts|js)x?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
},
},
// Loader for auto prefixing
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
babel.rc
{
"presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/proposal-class-properties", { "loose": true }],
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
],
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
"react-hot-loader/babel"
]
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"module": "CommonJS",
"target": "ES5",
"allowJs": true,
"rootDir": "typescript",
"esModuleInterop": true,
"noEmit": false,
"jsx": "react",
"experimentalDecorators": true
},
}
package.json
"dependencies": {
"@babel/core": "^7.8.7",
"@babel/eslint-parser": "^7.18.9",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.7",
"@babel/plugin-proposal-optional-chaining": "^7.7.5",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.18.9",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"babel-loader": "^8.0.6",
"eslint": "^6.7.2",
"eslint-config-typescript": "^3.0.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"extract-text-webpack-plugin": "^3.0.2",
"ts-loader": "^9.3.1",
"ts-standard": "^11.0.0",
"typescript": "^3.8.3",
"typescript-map": "0.0.7",
"webpack": "^5.74.0",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "^4.10.0",
}
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"@babel/preset-typescript": "^7.6.0",
"babel-loader": "^8.0.6",
"eslint-config-prettier": "^6.10.0",
"live-server": "^1.2.1",
"sass": "^1.53.0",
"webpack-dev-server": "^3.10.3"
},
"ts-standard": {
"project": "./tsconfig.json"
},