[英]Lerna with Yarn, TypeScript and React Native: Cannot find module '@project/common' or its corresponding type declarations.ts(2307)
The project uses Yarn, React Native, Lerna and Typescript. It is structured as a monorepo该项目使用 Yarn、React Native、Lerna 和 Typescript。它的结构是一个 monorepo
Here is the structure:这是结构:
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 looks like this: lerna.json 看起来像这样:
{
"packages": [
"packages/*"
],
"npmClient": "yarn",
"version": "0.0.7",
}
The root packages.json looks like this:根 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"
}
}
The root tsconfig.json looks like this:根 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"]
}
The typical packages/common/packages.json looks like this:典型的 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": {
...
}
}
The typical packages/common/tsconfig.json looks like this:典型的 packages/common/tsconfig.json 如下所示:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"outDir": "lib",
"strict": true,
"target": "es6"
},
"compileOnSave": true,
"include": ["src"]
}
The React Native file packages/mobile/packages.json looks like this: 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"
},
}
I first ran into:我第一次遇到:
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".
Obviously Yarn is trying to pull the dependencies from its packages registery.显然,Yarn 正试图从其包注册中提取依赖项。 This fails.这失败了。
Then I tried to remove the references to @project/common1 and @project/common2 in the dependencies of the packages.然后我尝试删除包依赖项中对@project/common1 和@project/common2 的引用。
In the source, VS Code underline the imports in red and prints:在源代码中,VS Code 以红色强调导入并打印:
Cannot find module '@project/common1' or its corresponding type declarations.ts(2307)
I also tried to use Yarn Workspace, yet I ran into modules hoisting issues with React Native.我也尝试使用 Yarn Workspace,但我遇到了 React Native 的模块提升问题。 I did not want create a list of all possibly incompatible package, since it seems to be difficult to maintain.我不想创建所有可能不兼容的列表 package,因为它似乎很难维护。
"workspaces": {
"nohoist": ["react-native", "react-native/**", "@react-native-community/checkbox", "@react-navigation/native"]
}
Is there a simple solution?有一个简单的解决方案吗?
Or is it simpler for this use case to abandon Lerna and use GitHub based common repositories?或者这个用例放弃 Lerna 并使用基于 GitHub 的公共存储库是否更简单?
I don't know if this is the most simple approach but I could get it working by adding Yarn workspaces.我不知道这是否是最简单的方法,但我可以通过添加 Yarn 工作区来使其工作。
In the main packages.json I added:在主要的 packages.json 中,我添加了:
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**mobile**",
"**react**",
"**react-native**",
...
]
},
In Lerna.json I added:在 Lerna.json 我补充说:
"useWorkspaces": true,
From the root tsconfig.json I deleted:从根 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"],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.