"TypeError: Object(...) is not a function" exception when importing the generated client in Next.JS app

[godness84]

I use Next.JS with typescript plugin. When I import the generated client that's the exception that gets raised.

If I replace exports.createClient with module.exports.createClient it works.

What am I missing?

[helios1138]

can you provide the full error with stack trace? also, what is your Node version and what's in your tsconfig.json?

[godness84]

Hi @helios1138 , sure!

[ event ] build page: /grid
[ wait ]  compiling ...
[ warn ]  ./pages/grid.tsx
Attempted import error: 'createClient' is not exported from './../client/createClient'.
[ info ]  ready on null
TypeError: Object(...) is not a function
    at Module../pages/grid.tsx (/Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:589:88)
    at __webpack_require__ (/Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:23:31)
    at Object.3 (/Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:756:18)
    at __webpack_require__ (/Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:23:31)
    at /Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:91:18
    at Object.<anonymous> (/Users/itsme/dev/recipejs/packages/web/.next/server/static/development/pages/grid.js:92:12)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Module.m._compile (/Users/itsme/dev/recipejs/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/itsme/dev/recipejs/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at EventEmitter.handleCallback (/Users/itsme/dev/recipejs/node_modules/next/dist/server/on-demand-entry-handler.js:246:35)

Node: v10.15.3

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "experimentalDecorators": true,
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "outDir": ".next"
  },
  "exclude": [
    ".next",
    "server/**/*.*"
  ]
}

And here how it is transpiled in my grid.js file (copy-pasted just the interesting part):

/***/ "./client/createClient.js":
/*!********************************!*\
  !*** ./client/createClient.js ***!
  \********************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime-corejs2/core-js/object/assign */ "../../node_modules/@babel/runtime-corejs2/core-js/object/assign.js");
/* harmony import */ var _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0__);




var __assign = undefined && undefined.__assign || function () {
  __assign = _babel_runtime_corejs2_core_js_object_assign__WEBPACK_IMPORTED_MODULE_0___default.a || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

Object.defineProperty(exports, '__esModule', {
  value: true
});

var __1 = __webpack_require__(/*! graphql-typed-client */ "graphql-typed-client");

exports.createClient = function (options) {
  var typeMap = __1.linkTypeMap(__webpack_require__(/*! ./typeMap.json */ "./client/typeMap.json"));

  return __1.createClient(__assign({}, options, {
    queryRoot: typeMap.Query,
    mutationRoot: typeMap.Mutation
  }));
};

/***/ }),