2

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"
  },
Indra Neel
  • 125
  • 2
  • 7

0 Answers0