[webpack-cli] TypeError: Cannot read property 'javascript' of undefined

Describe the bug

I'm facing annoying bug I finished to setup a basic webpack config, I would like to minify the ts code so I used terser to do it but webpack-cli throw

TypeError: Cannot read property 'javascript' of undefined I'm a bit confused should I use uglify or an other plugin to minify the ts code or is that possible to do it with terser ? Look it terser can't read ts code maybe possible to translate the ts code to js to be minify after :/

What is the current behavior?

I started to used webpack since a week and would like to implement it on my truly project. Stack: -TypeScript -ReactJs

To Reproduce

Steps to reproduce the behavior:

config :

package.json

{
  "name": "webpack-react",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "start:prod": "webpack serve --config webpack.prod.js",
    "start:dev": "webpack serve --hot",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.6.0",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "fork-ts-checker-webpack-plugin": "^1.6.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^1.2.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "terser-webpack-plugin": "^5.0.1",
    "ts-loader": "^8.0.7",
    "typescript": "^3.9.7",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.8.1",
    "webpack-merge": "^5.2.0"
  },
  "dependencies": {
    "@hot-loader/react-dom": "^16.10.2",
    "@types/lodash": "^4.14.162",
    "core-js": "^3.2.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-hot-loader": "^4.12.13",
    "regenerator-runtime": "^0.13.3"
  },
  "main": "server.js",
  "description": ""
}

webpack.commun.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.tsx",
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

webpack.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  devtool: "source-map",
  output: {
    filename: "[name].[contentHash].bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      minify: {
        removeAttributQuotes: true,
        collapseWhitespace: true,
        removeComents: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contentHash].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 2. Extract CSS to dist (or file)
          "css-loader", // 1. Turns CSS into commonjs
          // for sass just add sass-loader to turns sass into CSS
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin(), new OptimizeCssAssetsWebpackPlugin()],
  },
});

src/index.tsx

import * as _ from 'lodash';
import { cube } from "./math";
import './styles.css';

if (process.env.NODE_ENV !== 'production') {
  console.log('Looks like we are in development mode!');
}

 function component() {
   const element = document.createElement('pre');

   element.innerHTML = [
     'Hello webpack!',
     '5 cubed is equal to ' + cube(5)
   ].join('\n\n');

   return element;
 }

 document.body.appendChild(component());

npm run  build

Expected behavior

> webpack-react@1.0.0 build /Users/***/webpack-react
> webpack --config webpack.prod.js

[webpack-cli] TypeError: Cannot read property 'javascript' of undefined
    at /Users/***/webpack-react/node_modules/terser-webpack-plugin/dist/index.js:400:38
    at SyncHook.eval [as call] (eval at create (/Users/***/webpack-react/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:87:1)
    at SyncHook.lazyCompileHook (/Users/***/webpack-react/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/***/webpack-react/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/***/webpack-react/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:662:28)
    at /Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:321:11
    at Compiler.readRecords (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:529:11)

webpack / webpack-cli

[webpack-cli] TypeError: Cannot read property 'javascript' of undefined #1992