react-typescript 中的 graphql-request / webpack 警告答案

【问题标题】：graphql-request / webpack warnings in react-typescriptreact-typescript 中的 graphql-request / webpack 警告
【发布时间】：2022-01-12 21:09:06
【问题描述】：

在我的 react/typescript 应用程序中，我使用了 graphql-request，一切正常。就在我编译应用程序时，我在终端中收到了一些警告。有人有同样的经历吗？触发警告的代码部分如下：

import { gql, request } from "graphql-request"

const [id, setId] = useState<number | undefined>(undefined);

const query = gql
    `query {
      id 
    }`;
  useEffect(() => 
  {
    request(`${endpoint}/maps`, query).then((data) => setId(data.id))
      .catch((error) => console.error("Could not load id", error))
      .finally(() => setLoading(false));
  }, [query]);

这些是我收到的警告：

WARNING in ./node_modules/graphql-request/dist/createRequestBody.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/createRequestBody.ts' file: Error: ENOENT: no such file or directory, open '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/createRequestBody.ts'
 @ ./node_modules/graphql-request/dist/index.js 217:42-72
 @ ./src/map_viewer/map_overview.tsx 23:0-47 61:16-19 80:4-11
 @ ./src/dashboard/dashboard.tsx 25:0-51 299:46-55
 @ ./src/App.tsx 4:0-46 10:35-44
 @ ./src/index.tsx 7:0-24 25:33-36

WARNING in ./node_modules/graphql-request/dist/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/index.ts'
 @ ./src/map_viewer/map_overview.tsx 23:0-47 61:16-19 80:4-11
 @ ./src/dashboard/dashboard.tsx 25:0-51 299:46-55
 @ ./src/App.tsx 4:0-46 10:35-44
 @ ./src/index.tsx 7:0-24 25:33-36

WARNING in ./node_modules/graphql-request/dist/types.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/types.ts' file: Error: ENOENT: no such file or directory, open '/home/lukas/projects/bubble/bubble-os/node_modules/graphql-request/src/types.ts'
 @ ./node_modules/graphql-request/dist/index.js 219:14-32
 @ ./src/map_viewer/map_overview.tsx 23:0-47 61:16-19 80:4-11
 @ ./src/dashboard/dashboard.tsx 25:0-51 299:46-55
 @ ./src/App.tsx 4:0-46 10:35-44
 @ ./src/index.tsx 7:0-24 25:33-36

3 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.66.0 compiled with 3 warnings in 5142 ms

我已经检查了互联网，但找不到解决方案。同样在 graphql-request 的 GitHub 问题中，我找不到任何东西。我试图在 codeandbox.io 中重现该问题，但没有收到任何警告。

也许我使用的软件包版本可以提供有关问题所在的线索：

节点：V16.13.2
graphql：16.2.0，
graphql 请求：3.7.0
webpack: 5.66.0

如果您能提供任何可能出错的提示，我将不胜感激。

【问题讨论】：

标签： reactjs typescript webpack graphql

【解决方案1】：

1- 要忽略警告，您可以在 webpack.config.js 文件中使用以下配置。 (Check here for more information)

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

2- 类似警告的另一种解决方案可能是通过在项目的根目录中添加一个包含 GENERATE_SOURCEMAP=false

的 .env 文件来禁用源映射

【讨论】：