带有 Yarn、TypeScript 和 React Native 的 Lerna：找不到模块“@project/common”或其对应的类型声明。ts(2307)答案

【问题标题】：Lerna with Yarn, TypeScript and React Native: Cannot find module '@project/common' or its corresponding type declarations.ts(2307)带有 Yarn、TypeScript 和 React Native 的 Lerna：找不到模块“@project/common”或其对应的类型声明。ts(2307)
【发布时间】：2020-12-08 06:11:19
【问题描述】：

该项目使用 Yarn、React Native、Lerna 和 Typescript。它的结构是一个单一的仓库

结构如下：

project
|- packages
   | - mobile
       | - src
       | - packages.json
       | - tsconfig.json
   | - cloud-functions
       | - src
       | - packages.json
       | - tsconfig.json
   | - common1
       | - lib
       | - src
       | - packages.json
       | - tsconfig.json
   | - common2
       | - lib
       | - src
       | - packages.json
       | - tsconfig.json
| - packages.json
| - tsconfig.json
| - lerna.json

lerna.json 看起来像这样：

{
  "packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "version": "0.0.7",
}

根 packages.json 如下所示：

{
  "name": "project",
  "private": true,
  "scripts": {
    ...
  },
  "devDependencies": {
    "@types/node": "^14.0.27",
    "lerna": "^3.22.1",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.7"
  }
}

根 tsconfig.json 如下所示：

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": "./",
    "paths": {
      "@project/common1": ["packages/common1/lib"],
      "@project/common2": ["packages/common2/lib"],
      "@project/mobile": ["packages/mobile/src"],
      "@project/cloud-functions": ["packages/cloud-functions/src"],
    }
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/*", "babel.config.js", "metro.config.js", "jest.config.js"]
}

典型的 packages/common/packages.json 如下所示：

{
  "name": "@project/common1",
  "version": "0.0.7",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "files": [
    "lib/**/*"
  ],
  "private": true,
  "devDependencies": {
    "@project/common2": "latest", //for common1 only
    "@types/node": "^14.0.27",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.7"
  },
  "dependencies": {
    ...
  }
}

典型的 packages/common/tsconfig.json 如下所示：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "strict": true,
    "target": "es6"
  },
  "compileOnSave": true,
  "include": ["src"]
}

React Native 文件 packages/mobile/packages.json 如下所示：

{
    "name": "@project/mobile",
    "version": "0.0.7",
    "private": true,
    "dependencies": {
        "@project/common1": "latest",
        "@project/common2": "latest",
        ...
    },
    "devDependencies": {
        ...
        "ts-node": "^8.10.2",
        "typescript": "^3.8.3"
    },
}

我第一次遇到：

lerna ERR! yarn install --mutex network:42424 --non-interactive stderr:
warning Waiting for the other yarn instance to finish (19560)
warning Waiting for the other yarn instance to finish (21568)
error An unexpected error occurred: "https://registry.yarnpkg.com/@project%2fcommon1: Not found".

显然 Yarn 正试图从它的包注册中提取依赖项。这失败了。

然后我尝试删除包的依赖项中对@project/common1 和@project/common2 的引用。

在源代码中，VS Code 用红色下划线并打印：

Cannot find module '@project/common1' or its corresponding type declarations.ts(2307)

我也尝试使用 Yarn Workspace，但我遇到了 React Native 的模块提升问题。我不想创建所有可能不兼容的包的列表，因为它似乎很难维护。

"workspaces": {
  "nohoist": ["react-native", "react-native/**", "@react-native-community/checkbox", "@react-navigation/native"]
}

有简单的解决办法吗？

或者这个用例放弃 Lerna 并使用基于 GitHub 的公共存储库更简单？

【问题讨论】：

你是通过lerna cli 创建你的包repo 还是在lerna 为你设置好之后手动创建它们？
我手动创建了它，因为我需要使用 Typescript 进行一些调整并且该项目已经存在
你是否有一个可重现的 repo 让我看看？
我浏览了网络上的教程，这些都是为此目的使用 Yarn 工作区。否则他们会使用“../../packages/package”中的导入包。我想我只是想让它以错误的方式工作。我添加了 Yarn 工作区，列出了 nohoist 模块并从 tsconfig 中删除了“路径”。 json。现在它正在工作......

标签： typescript react-native yarnpkg lerna monorepo

【解决方案1】：

我不知道这是否是最简单的方法，但我可以通过添加 Yarn 工作区来使其工作。

在我添加的主要 packages.json 中：

  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**mobile**",
      "**react**",
      "**react-native**",
      ...
    ]
  },

在 Lerna.json 我添加了：

  "useWorkspaces": true,

从我删除的根 tsconfig.json 中：

    "baseUrl": "./",
    "paths": {
      "@project/common1": ["packages/common1/lib"],
      "@project/common2": ["packages/common2/lib"],
      "@project/mobile": ["packages/mobile/src"],
      "@project/cloud-functions": ["packages/cloud-functions/src"],
    }

【讨论】：