Ant Design: Property 'TabPane' does not exist

Question

Struggling to find a solution to this. I fear it's something to do with versions. However i am not excited about the prospect of downgrading, but downgrade what? Any help would be appreciated. Please ask for any extra information.. Was not sure what else or what to show.

After running webpack;

TS2339: Property 'TabPane' does not exist on type '(...args: any[]) => any'.

Code main.tsx

import * as React from "react";

import { Tabs, Button, Icon } from 'antd';
const TabPane = Tabs.TabPane;

export class Main extends React.Component
{
    render()
    {
        return (
            <div className="main-container">
            <div>
                <Tabs>
                    <TabPane key="1" tab={<span><Icon type="android" />Tab1</span>}>
                        <div style={{ padding: '5px' }}>
                        Tab1
                        </div>
                    </TabPane>

                    <TabPane key="2" tab={<span><Icon type="android" />Tab2 </span>}>
                    </TabPane>
                </Tabs>
            </div>
           </div>
        );
    }
}

Webpack.config.js

var createVendorChunk = require('webpack-create-vendor-chunk');
var webpack = require('webpack');
var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: {
    ui: './src/index.tsx'
  },
  externals: {
    "react": "React",
    "react-dom": "ReactDOM",
  },
  devtool: 'source-map',
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  output: {
    path: path.resolve(__dirname, "chrome-extension/build/"),
    publicPath: "build",
    filename: "[name].bundle.js",
    chunkFilename: '[name].bundle.js',
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          enforce: true,
          chunks: 'all'
        },
      }
    },
    runtimeChunk: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  target: 'node', // in order to ignore built-in modules like path, fs, etc.
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
  module: {

    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader",
          options: {
            javascriptEnabled: true
          }
        }]
      }
    ],
  }
};

package.json

{
  "name": "test",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack --watch"
  },
  "author": "Elgan",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.0",
    "typescript": "^3.0.3",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-create-vendor-chunk": "^0.1.1",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "antd": "^3.9.2",
    "babel": "^6.23.0",
    "babel-plugin-import": "^1.9.1",
    "babel-preset-env": "^1.7.0",
    "classnames": "^2.2.5",
    "install": "^0.12.1",
    "lodash": "^4.17.11",
    "npm": "^6.4.1",
    "prop-types": "^15.6.2",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "ts-loader": "^5.1.1"
  }
}

Answer 1

Changing to awesome-typescript-loader seemed to help. Though not sure why, so elaboration would be useful.

I changed the TS loader from ts-loader to awesome-typescript-loader in the webpack.config.js. Then i changed the TSConfig module to commonjs. It compiled now.

webpack.config.js

  {
    test: /\.tsx?$/,
    loader: "awesome-typescript-loader",
    exclude: /node_modules/
  },

tsconfig.ts

{
    "compilerOptions": {
        "outDir": "./dist/", // path to output directory
        "sourceMap": true, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "commonjs", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true // allow a partial TypeScript and JavaScript codebase
    },
    "exclude": [
        "node_modules"
    ],

}