Awesome Typescript Loader throwing error about too many function arguments

1k Views Asked by At

I'm getting the errors while setting up the useReducer hook in Reactjs

ERROR in [at-loader] ./src/reducer.ts:3:372 
    TS2554: Expected 2 arguments, but got 1.

ERROR in [at-loader] ./src/reducer.ts:15:32 
    TS2554: Expected 1 arguments, but got 3.

ERROR in [at-loader] ./src/reducer.ts:21:32 
    TS2554: Expected 1 arguments, but got 3.

The errors have to deal with calling functions with incorrect number of arguments, but strangely this whole file only has one function definition and it's not being called anywhere. The lines of code the error messages correspond to don't really make sense either. Is there something I'm missing?

reducer.js:

import { SET_USER, CLEAR_USER, RESET } from './actions'

interface Action {
  type: string;
  payload: object;
}

interface State {
  user: object;
  authenticated: boolean;
}

export const initialState = {
  user: {},
  authenticated: false,
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case SET_USER:
      return { ...state, user: action.payload, authenticated: true }
    case CLEAR_USER:
      return { ...state, user: initialState.user, authenticated: false }
    case RESET:
      return initialState
    default:
      throw new Error()
  }
}

Side note, changing this file to a javascript file fixes any issues.

1

There are 1 best solutions below

0
On BEST ANSWER

The error actually came from using babel and awesome-typescript-loader in webpack

  module: {
    rules: [
      {
        test: /\.(ts|tsx)?$/,
        loader: 'awesome-typescript-loader',
      },
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },

Removing awesome-typescript-loader fixes it since babel 7+ can compile typescript.

Full webpack.config.js:

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = (env) => ({
  entry: './src/index.tsx',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  output: {
    path: path.join(__dirname, '/build'),
    filename: 'bundle.min.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(env),
    }),
  ],
})