Búsqueda de sitios web

reactjs - "Es posible que necesites un cargador adicional para manejar el resultado de estos cargadores." al intentar importar un módulo personalizado en un archivo TSX

Tengo un módulo de nodo personalizado que he añadido a mi proyecto de React. Cuando importo un componente del módulo y ejecuto la aplicación, devuelve un 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,

He intentado encontrar problemas similares, pero otros estaban teniendo problemas con los operadores de fusión nula, los cuales no están en la línea del problema, y mucho menos se usan en el archivo. El archivo del módulo:

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;

El tsconfig del módulo:

{
  "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"]
}

Artículos relacionados