Home » Javascript » React Hot Loader adding babel BEFORE typescript causes TypeScript errors but adding babel AFTER typescript works

React Hot Loader adding babel BEFORE typescript causes TypeScript errors but adding babel AFTER typescript works

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have been working to get React Hot Loader 4.2.0 to work with TypeScript. I need to compile into ES5 so I would like to use the option to Add babel BEFORE typescript. However this causes a lot of errors that have not been there before like:

TS7006: Parameter ‘key’ implicitly has an ‘any’ type.

TS7006: Parameter ‘code’ implicitly has an ‘any’ type.

TS2304: Cannot find name ‘methodName’.

{
  test: /\.tsx?$/,
  use: [
    'ts-loader', // (or awesome-typescript-loader)
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          '@babel/plugin-syntax-typescript',
          '@babel/plugin-syntax-decorators',
          '@babel/plugin-syntax-jsx',
          'react-hot-loader/babel',
        ],
      },
    }
  ],
}

https://github.com/gaearon/react-hot-loader#add-babel-before-typescript

Visual Studio does not show these errors and If I use the code for Add babel AFTER typescript everything compiles without a problem.

    {
  test: /\.tsx?$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        babelrc: false,
        plugins: ['react-hot-loader/babel'],
      },
    },
    'ts-loader', // (or awesome-typescript-loader)
  ],
}

https://github.com/gaearon/react-hot-loader#add-babel-after-typescript

This is what I have installed:

npm install [email protected] --save-dev
npm install @babel/plugin-syntax -typescript --save-dev
npm install @babel/plugin-syntax-decorators --save-dev
npm install @babel/plugin-syntax -jsx --save-dev
npm install @babel/core @babel/preset-env --save-dev
Answers: