Typescript: TypeError: Class constructor cannot be invoked without 'new'

[mwildehahn]

Bug report

Getting the following error in my project:

TypeError: Class constructor  cannot be invoked without 'new'

Looking at some related issues: #7914 it seems like this is because I'm using a library that requires targeting es6, which is fine, but I'm having issues telling next.js to use native classes instead of transpiling down to functions.

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

Transpiled code:

var CustomNodeFactory =
/*#__PURE__*/
function (_AbstractReactFactory) {
  Object(_babel_runtime_corejs2_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_7__["default"])(CustomNodeFactory, _AbstractReactFactory);

  function CustomNodeFactory() {
    Object(_babel_runtime_corejs2_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_1__["default"])(this, CustomNodeFactory);

    return Object(_babel_runtime_corejs2_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3__["default"])(this, Object(_babel_runtime_corejs2_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_5__["default"])(CustomNodeFactory).call(this, "custom-node"));
  }

  Object(_babel_runtime_corejs2_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_2__["default"])(CustomNodeFactory, [{
    key: "generateModel",
    value: function generateModel() {
      return new CustomNodeModel();
    }
  }, {
    key: "generateReactWidget",
    value: function generateReactWidget(event) {
      return __jsx(CustomNodeWidget, {
        engine: this.engine,
        node: event.model,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 76
        },
        __self: this
      });
    }
  }]);

  return CustomNodeFactory;
}(_projectstorm_react_canvas_core__WEBPACK_IMPORTED_MODULE_10__["AbstractReactFactory"]);

Typescript code:

class CustomNodeFactory extends AbstractReactFactory<
  CustomNodeModel,
  DiagramEngine
> {
  constructor() {
    super("custom-node");
  }

  generateModel() {
    return new CustomNodeModel();
  }

  generateReactWidget(
    event: GenerateWidgetEvent<CustomNodeModel>
  ): JSX.Element {
    return <CustomNodeWidget engine={this.engine} node={event.model} />;
  }
}

Expected behavior

Use native es6 classes and avoid error.

System information

• OS: macOS
• Version of Next.js: 9.0.7

[mwildehahn]

Fixed this with the following custom .babelrc file:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": { "targets": { "node": true } }
      }
    ]
  ],
  "plugins": []
}

Although I'm curious if there is a better way

[michaeljonathanblack]

I'm running into what I think is the same issue, but under a different context. What I'm seeing when I run our build is the following error:

TypeError: Class constructor Document cannot be invoked without 'new'
    at new RootDocument (/Users/mherodev/git/my-project/build/.next/server/static/-aK3uMUavUDrLIDzynXXq/pages/_document.js:173:256)
    at c (/Users/mherodev/git/my-project/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:325)
    at Ua (/Users/mherodev/git/my-project/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:39:16)
    at a.render (/Users/mherodev/git/my-project/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:45:48)
    at a.read (/Users/mherodev/git/my-project/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:161)
    at Object.renderToStaticMarkup (/Users/mherodev/git/my-project/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:55:181)
    at renderDocument (/Users/mherodev/git/my-project/node_modules/next/dist/next-server/server/render.js:90:18)
    at Object.renderToHTML (/Users/mherodev/git/my-project/node_modules/next/dist/next-server/server/render.js:319:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)

This bug is fixed by your same fix (thanks, by the way), but it's a fix that I understand is a hack as next/babel is already performing this operation.

I'm going to try to put together a simple repro repo tonight.

[michaeljonathanblack]

Here's a link to my very-likely related ticket: #9000

Note: We're not using TypeScript.

[scott-thrillist]

Getting this too on v9.1.0. Though it only happens when I target browsers in addition to node: 'current'. Once I remove browsers then the site loads fine.

[Timer]

Closing as a reproducible demo was not provided.

If you can provide a project that reproduces this, we'd be happy to take a look!

[arthursoas]

Fixed mine extending my class to React.Component and adding super on constructor

Before

class Home {
    render(): ReactNode {
        return (
            <div>Hello World!</div>
        )
    }
}

After

class Home extends React.Component {
    constructor(props) {
        super(props);
    }

    render(): ReactNode {
        return (
            <div>Hello World!</div>
        )
    }
}

Hope this help you!

[SercanSercan]

A helpful link for those who may be trying to fix a similar issue:

https://storksnestblog.wordpress.com/2021/03/11/typeerror-class-constructor-htmlelement-cannot-be-invoked-without-new/

[Ousjiali]

hello all, I am having the same issues but on Nodejs, trying to connect session with mongobd database. its reads,
TypeError: Class constructor MongoStore cannot be invoked without 'new'.. pls am new to this so i really don't understand some documentations when i research

[shefaligoel136]

did you find any solution to this? RN I am facing the same issue

[Ousjiali]

Downgrade to Mongo 3. That was the solution the current Mongodb 4. Wasn't compatible

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.