webpack typescript production build fails

So basicly I decided to introduce typescript to our react project and the build got issues with resolving imports not specifying the .ts / .tsx extensions so I decided to add the ts-loader to our webpack configuration and it stopped working.

const nodeExternals = require('webpack-node-externals');
const paths = require('../config/paths');
const publicPath = paths.servedPath;
const webpack = require('webpack');
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin({
  versionCommand: 'describe --always --tags',
});

module.exports = {
  mode: 'production',
  bail: true,
  entry: [require.resolve('@babel/polyfill'), paths.appServerJs],
  externals: [nodeExternals()], 
  target: 'node',
  output: {
    // The build folder.
    path: __dirname + '/dist',
    filename: 'loader.js',
    publicPath: publicPath,
    libraryTarget: 'commonjs2'
  },
  plugins: [
    gitRevisionPlugin,
    new webpack.DefinePlugin({
      __BUILD_VERSION__: JSON.stringify(gitRevisionPlugin.version())
    })
  ],
  module: { 
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.ts(x)?$/,
        use: [
          'awesome-typescript-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'css-loader'
      },
      {
        test: /\.scss$/,
        loader: 'null-loader'
      },
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=100000'
      },
    ]
  },
  resolve: {
    modules: [paths.appSrc, paths.appServer],
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  }
};

tsconfig.json:

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "noImplicitAny": false,
      "strictNullChecks": true,
      "skipLibCheck": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": false,
      "esModuleInterop": true,
      "module": "commonjs",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "allowSyntheticDefaultImports": true,
      "jsx": "react"
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
    ]
  }

Babelrc:

{
  "compact": true,
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
      "@babel/preset-react"
  ]
}

The error I am getting when building is:

/app/prod_node_modules/@babel/preset-typescript/test/fixtures/flow-compat/ts-invalid/input.ts
TypeScript error in /app/prod_node_modules/@babel/preset-typescript/test/fixtures/flow-compat/ts-invalid/input.ts(1,13):
Property or signature expected.  TS1131

  > 1 | type Foo = {||};
      |             ^
    2 | 
    3 | foo;
    4 |

Am I missing something? I initialize the build by the following commands:

"build:server": "webpack --config ./server/webpack.config.prod.js",

Solution

The error shown here is a compilation failure when compiling some test data that's supposed to fail, from inside the @babel/preset-typescript package.

This failure there is intentional - the problem is that you shouldn't be compiling that file in the first place.

You haven't shown your tsconfig here, and its not clear what your project structure is, but the general problem is that that file is being included in the build and it shouldn't be. You need to ensure that only TS files from your application source are compiled, rather than every .ts file that's possibly available.