title: Unexpected token "<" expected "{" when passing Interfaces to React Class Component
body: <p>Ran into an issue in my Laravel 8/Babel/Mix/React/TypeScript environment where a regular React class component is producing a compile error, since I've migrated the project to TypeScript and started passing an empty props and simple state interface to the component.</p>
  <p>I've tried passing empty JSON objects, commenting out various import statements, moving the <code>export default</code> call below the function, but no dice so far.</p>
  <p>The compile error:</p>
  <pre><code>Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: /Users/.../MyComponent.tsx: Unexpected token, expected &quot;{&quot; (10:54)
  
     8 | import { IState } from '../interfaces';
     9 |
  &gt; 10 | export default class MyComponent extends React.Component&lt;{}, IState&gt; {
       |                                                         ^
    11 |
    12 |     constructor(props:any) {
    13 |       super(props);
      at Object._raise (/Users/.../node_modules/@babel/parser/lib/index.js:796:17)
  </code></pre>
  <p><code>MyComponent.jsx</code> snippet:</p>
  <pre class="lang-js prettyprint-override"><code>
  import { IState } from '../interfaces';
  
  export default class MyComponent extends React.Component&lt;{}, IState&gt; {
  
      constructor(props:any) {
        super(props);
        this.state = dummyData;
      }
      ...
  
  </code></pre>
  <p>Simplified <code>interfaces.ts</code>:</p>
  <pre><code>export interface IState {
      tasks: {
          [key: string]: ITask
        };
      columns: {
          [key: string]: IColumn
      };
      columnOrder: string[];
  }
  </code></pre>
  <p><code>webpack.mix.js</code></p>
  <pre><code>const mix = require('laravel-mix');
  
  require('laravel-mix-purgecss');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  mix.js('resources/js/app.ts', 'public/js')
      .react()
      .sass('resources/sass/app.scss', 'public/css')
      .postCss('resources/css/app.css', 'public/css', [
          require('tailwindcss')(),
      ])
      .setResourceRoot(&quot;/&quot;) // This allows easy resource linking from React components
      .purgeCss({
          //enabled: mix.inProduction(),
          enabled: true,
          folders: ['resources', 'app'],
          extensions: ['html', 'js', 'ts', 'tsx', 'php', 'vue'],
      });
  
  mix.extend('customAdditions', function(webpackConfig, ...args) {
      webpackConfig.resolve.extensions.push('.ts', '.tsx');
  });
  
  mix.customAdditions();
  </code></pre>
  <p><code>.babelrc</code></p>
  <pre><code>{
      &quot;plugins&quot;: [&quot;transform-class-properties&quot;],
      &quot;presets&quot;: [[&quot;@babel/preset-env&quot;, {&quot;modules&quot;: false}],
      &quot;@babel/preset-react&quot;]
  }
  </code></pre>
  <p><code>tsconfig.json</code></p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;, 
      &quot;module&quot;: &quot;commonjs&quot;, 
      &quot;lib&quot;: [&quot;dom&quot;, &quot;es2017&quot;],   
      &quot;jsx&quot;: &quot;react&quot;,      
      &quot;strict&quot;: true, 
      &quot;noImplicitAny&quot;: true,   
      &quot;moduleResolution&quot;: &quot;node&quot;,  
      &quot;esModuleInterop&quot;: true,   
      &quot;skipLibCheck&quot;: true,    
      &quot;forceConsistentCasingInFileNames&quot;: true ,
      &quot;watch&quot;: true,
    }
  }
  </code></pre>
  <p><strong>Update 1: Additional Things Tried to No Avail:</strong></p>
  <ul>
  <li>Incrementally downgrading React version (running <code>yarn</code> in between package version number changes) down to 16.14.0</li>
  <li>After that didn't work, downgrading both <code>@types/react</code> and <code>@types/react-dom</code> to their latest version 16 releases to match the downgraded react packages</li>
  <li>Running this scorched earth command: <code>watchman watch-del-all &amp;&amp; rm -f yarn.lock &amp;&amp; rm -rf node_modules &amp;&amp; yarn &amp;&amp; yarn cache clean &amp;&amp; yarn dev</code></li>
  </ul>