dotansimha / dotansimha/graphql-code-generator-community

`TypeError: Class constructor ClientSideBaseVisitor cannot be invoked without 'new'` with custom plugin

Open
#233 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

In my custom plugin, I am running into the error `TypeError: Class constructor ClientSideBaseVisitor cannot be invoked without 'new'`:

```sh
TypeError: Class constructor ClientSideBaseVisitor cannot be invoked without 'new'
at new Visitor (/Users/node_modules/my-plugin/dist/cjs/src/visitor
```

The source is:

```ts
// index.ts

import { Visitor } from './visitor.js';
// ..
const visitor = new Visitor(schema, allFragments, config);
```

```ts
// visitor.ts
import { ClientSideBaseVisitor } from "@graphql-codegen/visitor-plugin-common";

export class Visitor extends ClientSideBaseVisitor<
RawPluginConfig,
PluginConfig
> {
// .
}
```

---

I am compiling my code to commonjs, so the distributed code is:

```js
// index.js

var visitor_js_1 = require("./visitor.js");
// ..
var visitor = new visitor_js_1.Visitor(schema, allFragments, config);
```

```js
// visitor.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Visitor = void 0;
var tslib_1 = require("tslib");
var visitor_plugin_common_1 = require("@graphql-codegen/visitor-plugin-common");

var Visitor = /** @class */ (function (_super) {
tslib_1.__extends(Visitor, _super);
// ..
}(visitor_plugin_common_1.ClientSideBaseVisitor));
```

I was following the `typescript-msw` package as an example, which uses this code.

### Your Example Website or App

https://github.com/bitttttten/typescript-fixtures

### Steps to Reproduce the Bug or Issue

reference typescript-fixtures in your codegen, run codegen.

### Expected behavior

I expect it not to warn about needing to use `new` since the code is already using `new`.

### Screenshots or Videos

_No response_

### Platform

- OS: mac
- NodeJS: 14/16
- `graphql` version 16.5.0
- @graphql-codegen/cli 2.6.2"
- @graphql-codegen/introspection 2.1.1"
- @graphql-codegen/typescript 2.4.11"
- @graphql-codegen/typescript-msw ^1.1.2"
- @graphql-codegen/typescript-operations 2.4.0"
- @graphql-codegen/typescript-react-query ^3.6.2"

### Codegen Config File

_No response_

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with visitor.ts and index.ts in the custom plugin, then reproduce the issue using typescript-fixtures and the listed GraphQL Codegen setup. Compare the TypeScript source with its emitted CommonJS and inspect the ClientSideBaseVisitor inheritance path. Done means codegen runs with the custom plugin without the reported constructor error.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, node.js, typescript
Domain
api, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.