Как создать модуль TypeScript, содержащий компоненты React

Question

У меня есть приложение React, созданное с помощью create-react-app с использованием неоткрытого react-scripts.Когда я импортирую модуль в свое приложение React, я получаю следующее предупреждение:

./node_modules/@myscope/webcomponents/dist/components/Mock.d.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| import React, { CSSProperties } from "react";
> export interface IMockProps {
|     children?: React.ReactNode;
|     color: {

Я использую tsc для компиляции JS в TypeScript перед импортом, и у меня есть

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

указано в моем модуле package.json.В коде VS, похоже, нет проблем с использованием типографий в модулях, но react-scripts start, кажется, не может прочитать мои наборы, происходит сбой при export или declare.

Как мне скомпилировать модуль TypeScriptсодержащий компоненты React / JSX, которые могут быть импортированы компилятором, используемым react-scripts?react-scripts start не имеет проблем с другими модулями TypeScript, и я не могу отличить какие-либо различия между моими рабочими общедоступными модулями TypeScript и моими сбойными пользовательскими модулями TypeScript.

Реагирует приложение tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Модуль tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "rootDir": "src",
    "outDir": "dist",
    "declaration": true
  },
  "exclude": [
    "dist",
    "test"
  ]
}