Next.js: 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: https://github.com/zeit/next.js/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

[mherodev]

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.

[mherodev]

Here's a link to my very-likely related ticket: https://github.com/zeit/next.js/issues/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!