"You may need an additional loader to handle the result of these loaders." when trying to import custom module into TSX file

Question

I have a custom node module that I've added to my React project. When I import a component from the module and run the app, it returns an error:

Compiled with problems:

ERROR in ./node_modules/react-quick-reactions/src/components/QuickReactions.tsx 4:29

Module parse failed: Unexpected token (4:29)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { PopoverProps } from "../types/types";
| 
> const QuickReactions = (props: PopoverProps) => {
|   const {
|     isVisible = false,

I've tried to find similar problems, but others were having issues with nullish coalescing operators, which are not on the problem line, let alone used in the file. The module's file:

import { useMemo, useState } from "react";
import { PopoverProps } from "../types/types";

const QuickReactions = (props: PopoverProps) => {
  const {
    isVisible = false,
    onClick,
    closeButtonAlt = null,
    headerAlt = "Quick reactions",
    outerDivClass,
    closeButtonClass,
    headerClass,
    selectionContainerClass,
    reactionElementClass,
    reactionsArray,
    changeHeaderOnReactionElemHover = true,
    hideHeader,
    hideCloseButton,
  } = props;
  const [, setIsPopoverVisible] = useState(isVisible);
  const [popoverHeader, setPopoverHeader] = useState(headerAlt);

  // Resets the popover header to its default value (props.headerAlt).
  const resetHeader = useMemo(() => {
    setPopoverHeader(headerAlt);
  }, [headerAlt]);

  return (
    <div className={"rqr-outer-div " + outerDivClass}>
      {!hideCloseButton && (
        <span
          className={"rqr-close-button " + closeButtonClass}
          onClick={() => setIsPopoverVisible(false)}>
          {closeButtonAlt ? closeButtonAlt : "X"}
        </span>
      )}
      {!hideHeader && <div className={"rqr-header " + headerClass}>{popoverHeader}</div>}
      <div className={"rqr-selection-container " + selectionContainerClass}>
        {reactionsArray?.map((item, index) => (
          <span
            className={"rqr-reaction-element " + reactionElementClass}
            key={item?.name + "-" + index}
            id={item?.id}
            onClick={(e) => onClick(e.target as Element)}
            onMouseEnter={
              changeHeaderOnReactionElemHover
                ? () => setPopoverHeader(item?.name)
                : () => undefined
            }
            onMouseLeave={() => resetHeader}>
            {item?.content}
          </span>
        ))}
      </div>
    </div>
  );
};

export default QuickReactions;

The module's tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "react"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}