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.

CodePudding user response：

You're not importing your design system properly @cds/core needs to be @cds/react. You have a host of other issues as well but here's a working example:

import React from "react";
import { ClrLoadingState, CdsButton } from "@cds/react/button";

const ButtonProgress = ({ ...props }) => {
const onClickHandler = () => {alert("Button clicked");};

  return (
   <CdsButton
     loading-state={ClrLoadingState}
     onClick={onClickHandler}
     {...props}
   >
     Label
   </CdsButton>
  );
};

ButtonProgress.defaultProps = {
 isButtonDisabled: false
};

export default ButtonProgress;

Sandbox link: https://codesandbox.io/s/zen-liskov-58qfe?file=/src/ButtonProgress.js:0-451

You should read their docs to become more familiar: https://clarity.design/storybook/core/?path=/story/components-button--page