Ошибка Webpack «Модуль не найден» при попытке импортировать интерфейс TypeScript из библиотеки? - PullRequest
Новая
       22

Ошибка Webpack «Модуль не найден» при попытке импортировать интерфейс TypeScript из библиотеки?

0 голосов
/ 18 июня 2020

У меня есть проект React, и я конвертирую его в TypeScript как I go, поэтому новые компоненты - это TypeScript, а старые - JavaScript. Я также представляю FontAwesome через его компонент React.

Все работает нормально, пока я не импортирую интерфейс из fontawesome-common-types, что вызывает ошибку компиляции.

Это работает, пока я не раскомментирую первую строку: 

// import { IconDefinition } from '@fortawesome/fontawesome-common-types';
import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleRight } from '@fortawesome/pro-solid-svg-icons';

export type Props = {
  links: {
    text: string;
    icon: any; // This is what I need IconDefinition for
    url: string;
  }[];
};

const MyComponent: React.FC<Props> = ({ links }) => {
  return (
    <ul>
      {
        links.map((link,index)=>(
          <li key={index}>
            <a href={link.url}>
              {link.text}
              <FontAwesomeIcon icon={link.icon} />
            </a>
          </li>
        ))
      }
    </ul>
  );
};

В этот момент я получаю эту ошибку:

ERROR в ./src/components/MyComponent /MyComponent.tsx Модуль не найден: ошибка: не удается разрешить '@ fortawesome / fontawesome-common-types' в '/ Users / MYNAME / projects / PROJECT / src / components / MyComponent'

В tsconfig. json: 

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks":  true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}
...