Custom Loader is not a function error

[rpimentaf]

Hi, everyone!!!
I have a custom loader like this:

import { getIntrospectionQuery, buildClientSchema } from 'graphql';
import fetch from "cross-fetch";
// URL DA API GRAPHQL
const API_URL = "https://localhost:5001/graphql";
// TOKEN DE AUTENTICACAO PARA FAZER O INTROSPECTION DO GRAPHQL
const AUTH_TOKEN = "jwt token";
export default (schemaString, config) => {
    process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
    const introspectionQuery = getIntrospectionQuery();
    return fetch(API_URL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${AUTH_TOKEN}`
        },
        body: JSON.stringify({ query: introspectionQuery })
    }).then((response) => {
      return response.json();
    }).then((data) => {
      return buildClientSchema(data.data);
    });
}

When i run watch the error "Error: Failed to load custom loader: ./codegen-loader.js" at the follow code is throw:
if (typeof loader !== 'function') { throw new Error(Failed to load custom loader: ${loaderPointer}); }

This code is from @graphql-tools\load\index.js:207:15.

My package.json:

{
  "name": "anac-gerenciamentovoos",
  "description": "GerenciamentoVoos",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/typescript": "^2.4.11",
    "@graphql-codegen/typescript-operations": "^2.4.0",
    "@graphql-codegen/typescript-react-query": "^3.5.12",
    "@ux_components/all": "latest",
    "cross-fetch": "^3.1.5",
    "graphql": "^16.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.39.1",
    "styled-components": "^5.3.3",
    "ts-node": "^10.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "gen": "set NODE_TLS_REJECT_UNAUTHORIZED=0 & graphql-codegen",
    "gen:watch": "set NODE_TLS_REJECT_UNAUTHORIZED=0 & graphql-codegen --watch",
    "gen gen:watch": "graphql-codegen --config codegen.yml"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint": "^7.15.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.0.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4",
    "openapi-typescript-codegen": "^0.11.8",
    "prettier": "^2.2.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.0.3",
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/typescript": "^2.4.11",
    "@graphql-codegen/typescript-operations": "^2.4.0",
    "@graphql-codegen/typescript-react-query": "^3.5.12",
    "@graphql-codegen/typescript-graphql-files-modules": "2.1.1",
    "@graphql-codegen/typescript-document-nodes": "2.2.12",
    "@graphql-codegen/typescript-react-apollo": "3.2.15",
    "@graphql-codegen/introspection": "2.1.1"
  }
}

Does anyone know why this error is happening?

Tks!!!

[ardatan]

You use ESM import syntax which is not currently supported.
You need to use CommonJS syntax in custom loader because Codegen uses CommonJS.

[rpimentaf]

@ardatan, tks for your answer.

i've changed my code to:
const { getIntrospectionQuery, buildClientSchema } = require('graphql') const fetch = require("cross-fetch");

But the error is still there...

Any other sugestion?

Tks very much!

[srbagg]

@rpimentaf faced the same issue. After some debugging found out that export should be according to CJS spec. like

function loader() {
  ...
}

module.exports = loader;

After this change it works fine.

Also, it would be good to log error for the end user in the library. Found that there is no error thrown or logged from this statement in the catch block.

[n1ru4l]

@srbagg Good catch, I created ardatan/graphql-tools#4612 for tracking this!