'Class constructor l cannot be invoked without 'new'

Here is the full error:

Class constructor l cannot be invoked without 'new' TypeError: Class constructor l cannot be invoked without 'new' at renderWithHooks (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:85190:18) at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:88016:13) at beginWork (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:89254:16) at HTMLUnknownElement.callCallback (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:74150:14) at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:74199:16) at invokeGuardedCallback (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:74261:31) at beginWork$1 (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:94164:7) at performUnitOfWork (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:92976:12) at workLoopSync (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:92907:5) at renderRootSync (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-c02f3e.iframe.bundle.js:92870:7)

Here is my component file:

import React from "react";
import PropTypes from "prop-types";
import { ClrLoadingState, CdsButton } from "@cds/core/button";

const ButtonProgress = ({ isButtonDisabled, buttonLabel, onClick, ...props }) => {
  const loadingState = true;
  const onClickHandler = () => {
    alert("Button clicked");
  };
  const isDisabled = loadingState === ClrLoadingState.loading || isButtonDisabled;
  return (
    <CdsButton
      loading-state={loadingState}
      disabled={isDisabled}
      value={buttonLabel}
      name={buttonLabel}
      onClick={onClickHandler}
      {...props}
    />
  );
};

ButtonProgress.propTypes = {
  isButtonDisabled: PropTypes.bool,
  buttonLabel: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

ButtonProgress.defaultProps = {
  isButtonDisabled: false,
};

export default ButtonProgress;

I am not using any class based components still it gives me the error. Please help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source