错误：最终加载程序未返回缓冲区或字符串

Question

我将GraphQL查询和HOC组件转换为打字稿，现在出现以下错误：

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

我已经尝试了几乎所有在网上找到的东西。 在tsconfig中将allowJs设置为true。任何帮助将不胜感激。

版本：

  

打字稿：3.1.6

     

Webpack：4.29.3

     

awesome-typescript-loader：5.2.1

这是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;

还有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

如果您使用 awesome-typescript-loader 并收到此错误，并且如果您使用 .js 文件而不是 .ts 扩展名，则可以使用此解决方案解决问题

首先在 npm 或 yarn 中清理缓存

yarn cache clean

# OR

npm cache clean

将 allowJs 文件中的 tsconfig.json 选项设置为 true

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

}

Answer 2

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

更新您的tsconfig.json文件，使其包含以下代码：

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

}