Блог

Я написал хук React на Typescript и хотел бы опубликовать его в npm, но, похоже, я не могу правильно настроить конфигурацию сборки. Я не использую никаких других инструментов сборки, кроме tsc . Я прочитал рекомендации в документах Typescript docs, React docs и в нескольких сообщениях в блоге.

Я не получаю никаких ошибок при сборке и публикации, но когда я пытаюсь импортировать модуль в другой проект, я получаю сообщение об ошибке при импорте React. Тем не менее, все, что я подготовил, предполагает, что react это должно быть a peerDependency при публикации пользовательских хуков.

Не удается найти модуль ‘react’ из ‘../useMyHook/build/index.js ‘

• tsc: v4.1.3
• реагировать: v16.14.0

Репозиторий: https://github.com/raineorshine/use-swipe-to-dismiss

tsconfig.json:

 {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "target": "es5",
    "outDir": "./build"
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}
 

package.json (сокращенно):

 {
  "name": "useMyHook",
  "version": "0.1.0",
  "files": [
    "build/**/*"
  ],
  "main": "build",
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "peerDependencies": {
    "react": ">=16.0.0",
    "typescript": ">=4.1.0"
  },
  "devDependencies": {
    "@types/node": "^14.14.21",
    "@types/react": "^17.0.0"
  }
}
 

index.ts (сокращенно):

 import { useState } from 'react'

const useMyHook = () => {

  const [x, setX] = useState<number>(0)

  return {
    onClick: () => {
      console.log(x)
    }
  }
}

export default useMyHook