title: ts-loader not working (You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file)
body: <p>I'm trying to add TS to a JS project and it doesn't seem like <code>webpack</code> is picking up <code>ts-loader</code> for <code>.tsx</code> files. I've tried using babel and <code>awesome-ts-loader</code> and nothing that other people have done seem to work.</p>
  <p>Full error:</p>
  <blockquote>
  <p>ERROR in ./src/components/Account/Test.tsx 3:0 Module parse failed:
  The keyword 'interface' is reserved (3:0) You may need an appropriate
  loader to handle this file type, currently, no loaders are configured
  to process this file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a></p>
  </blockquote>
  <p>webpack config</p>
  <pre><code>const includePaths = [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'test'),
      path.resolve(__dirname, 'package.json'),
  ];
  
  module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  use: [
                      {
                          loader: 'ts-loader',
                      },
                  ],
                  include: includePaths,
              },
              {
                  test: /\.jsx?$/,
                  use: {
                      loader: 'babel-loader',
                  },
                  include: includePaths,
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: 'style-loader',
                      },
                      {
                          loader: 'css-loader',
                          query: moduleStyle,
                      },
                      {
                          loader: 'postcss-loader',
                      },
                      {
                          loader: 'sass-loader',
                      },
                  ],
                  include: includePaths,
              },
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader', 'postcss-loader'],
                  include: includePaths,
              },
              {
                  test: /\.(gif|png|jpg|eot|woff|ttf|svg)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: 'web/[hash].[ext]',
                          },
                      },
                  ],
                  include: includePaths,
              },
          ],
      },
  </code></pre>
  <p>tsconfig</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
          &quot;sourceMap&quot;: true,
          &quot;module&quot;: &quot;ES2015&quot;,
          &quot;target&quot;: &quot;es6&quot; /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
          &quot;esModuleInterop&quot;: true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
          &quot;forceConsistentCasingInFileNames&quot;: true /* Ensure that casing is correct in imports. */,
          &quot;skipDefaultLibCheck&quot;: true,
          &quot;skipLibCheck&quot;: true,
          &quot;baseUrl&quot;: &quot;.&quot;,
          &quot;paths&quot;: {
              &quot;app/*&quot;: [&quot;src/*&quot;]
          },
          &quot;allowJs&quot;: true,
          &quot;allowSyntheticDefaultImports&quot;: true,
          &quot;jsx&quot;: &quot;react&quot;
      },
      &quot;include&quot;: [&quot;src&quot;]
  }
  </code></pre>
  <p>Test component that I'm trying to import in JS file</p>
  <pre><code>import React from 'react';
  
  interface TestComponentProps {
      prop1: string;
      prop2: string;
  }
  
  const TestComponent: React.FC&lt;TestComponentProps&gt; = ({ prop1, prop2 }) =&gt; {
      return (
          &lt;div&gt;
              Test Component
              &lt;div&gt;{prop1}&lt;/div&gt;
              &lt;div&gt;{prop2}&lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default TestComponent;
  </code></pre>