Error: Final loader didn't return a Buffer or String

Question

I converted my GraphQL query and HOC component to typescript an am now getting the following error:

ERROR in ./client/components/Protected.Route.tsx
Module build failed: Error: Final loader (./node_modules/awesome-typescript-loader/dist/entry.js) didn't return a Buffer or String
    at runLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/webpack/lib/NormalModule.js:318:18)
    at /Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ ./client/components/App.js 5:0-47 12:59-73
 @ ./client/index.js

ERROR in ./client/graphql/queries/currentUser.ts
Module build failed: Error: Final loader (./node_modules/awesome-typescript-loader/dist/entry.js) didn't return a Buffer or String
    at runLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/webpack/lib/NormalModule.js:318:18)
    at /Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/Users/rsokz/Documents/Projects/ReactWorkspace/mydash/auth-graphql-starter/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ ./client/components/Auth/AuthForm.jsx 50:0-65 104:17-33 136:17-33 216:12-28
 @ ./client/components/App.js
 @ ./client/index.js

I've tried pretty much everything I've found online. allowJs is set to true in tsconfig. Any help would be grealy appreciated.

Versions:

Typescript: 3.1.6

Webpack: 4.29.3

awesome-typescript-loader: 5.2.1

This is the code for Protected.Route.tsx:

import * as React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { Query } from 'react-apollo';
import currentUserQuery from '../graphql/queries/currentUser';

interface ProtectedRouteProps extends RouteProps {
  component: React.ComponentType<RouteProps>;
}

const ProtectedRoute = ({ component: Component, ...rest }: ProtectedRouteProps) => (
  <Route
    {...rest}
    render={props => {
      <Query query={currentUserQuery}>
        {({ loading, data: { currentUser } }) => {
          if (loading) return null;
          if (currentUser) {
            return <Component {...props} />;
          }
        }}
      </Query>;
      return (
        <Redirect
          to={{
            pathname: '/login',
            state: {
              from: props.location
            }
          }}
        />
      );
    }}
  />
);

export default ProtectedRoute;

And the code for currentUser.ts:

import { gql } from 'apollo-boost';

export default gql`
  {
    currentUser {
      id
      email
      name
    }
  }
`;

webpack.config.js

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.jsx?$/,
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
        },
        exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
          getCustomTransformers: () => ({ before: [styledComponentsTransformer] })
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

Answer 1

If you are using awesome-typescript-loader and get this Error, and if you are using .js file instead .ts extension, you can solve the problem with this solution

first of all clean your cache in npm or yarn

yarn cache clean

# OR

npm cache clean

set allowJs option in tsconfig.json file to true

{
    "compilerOptions": {
         /// ... other options     
      "allowJs": true,
    }

}

Answer 2

http://timjames.me/blog/2017/04/03/webpack-final-loader-didnt-return-a-buffer-or-string/

Update your tsconfig.json file to include the following code:

"awesomeTypescriptLoaderOptions": {
"useWebpackText": true,
"useTranspileModule": true,
"doTypeCheck": true,
"forkChecker": true

}