graphql-request / webpack warnings in react-typescript

Question

in my react/typescript application I use graphql-request and everything works fine. Just when I compile the application I get a few warnings in the terminal. Did somebody experience the same? The code parts that trigger the warnings are the following:

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

const [id, setId] = useState(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]);

These are the warnings I get:

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

I checked already the internet but could not find a solution. Also in the GitHub issues of graphql-request I could not find anything. I tried to reproduce the problem in codesandbox.io but there I do not get any warning.

Maybe the versions of the packages I use give a clue on what the problem could be:

node: V16.13.2
graphql: 16.2.0,
graphql-request: 3.7.0
webpack: 5.66.0

I would be thankful for any hint on what could be wrong.

user_1376715 · Answer

1- To ignore the warnings you can use the following configuration in your webpack.config.js file. (Check here for more information)

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

2- Another solution for similar warnings might be disabling the source maps by adding a .env file in the root of your project containing GENERATE_SOURCEMAP=false

graphql-request / webpack warnings in react-typescript

1 Answers