React-TypeScript 中的 graphql-request / webpack 警告

Question

在我的 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 issues 中我找不到任何东西。我尝试在codesandbox.io 中重现该问题，但没有收到任何警告。

也许我使用的软件包的版本可以提供有关问题可能是什么的线索：

• 节点：V16.13.2
• 图ql：16.2.0，
• graphql 请求：3.7.0
• 网页包：5.66.0

如果有任何关于可能出问题的提示，我将不胜感激。

Answer 1

1-要忽略警告，您可以在webpack.config.js文件中使用以下配置。（查看此处了解更多信息）

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

2-类似警告的另一个解决方案可能是通过在项目的根目录中添加包含GENERATE_SOURCEMAP=false的.env文件来禁用源映射