reactjs - 错误: Final loader didn't return a Buffer or String

Question

我将 GraphQL 查询和 HOC 组件转换为 typescript ，现在出现以下错误:

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

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

版本:

Typescript: 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

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

}