“您可能需要一个额外的加载器来处理这些加载器的结果。” 尝试将自定义模块导入 TSX 文件时

Question

我有一个自定义节点模块，已添加到我的 React 项目中。当我从模块导入组件并运行应用程序时，它返回错误：

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,

我试图找到类似的问题，但其他人遇到了无效合并运算符的问题，这些运算符不在问题行上，更不用说在文件中使用了。模块的文件：

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;

该模块的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"]
}