Lerna dengan Yarn, TypeScript dan React Native: Tidak dapat menemukan modul '@ project / common' atau jenis declarations.ts yang sesuai (2307)

Question

Proyek ini menggunakan Yarn, React Native, Lerna dan Typecript. Itu terstruktur sebagai monorepo

Berikut strukturnya:

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 terlihat seperti ini:

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

Paket root.json terlihat seperti ini:

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

Root tsconfig.json terlihat seperti ini:

{
  "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"]
}

Paket khas / common / packages.json terlihat seperti ini:

{
  "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": {
    ...
  }
}

Paket khas / common / tsconfig.json terlihat seperti ini:

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

Paket file React Native / mobile / packages.json terlihat seperti ini:

{
    "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"
    },
}

Saya pertama kali menemukan:

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".

Jelas Yarn mencoba menarik dependensi dari register paketnya. Ini gagal.

Kemudian saya mencoba untuk menghapus referensi ke @ project / common1 dan @ project / common2 dalam dependensi paket.

Di sumbernya, VS Code menggarisbawahi impor dengan warna merah dan mencetak:

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

Saya juga mencoba menggunakan Yarn Workspace, namun saya mengalami masalah modul dengan React Native. Saya tidak ingin membuat daftar semua paket yang mungkin tidak kompatibel, karena tampaknya sulit untuk dipelihara.

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

Apakah ada solusi sederhana?

Atau lebih mudah untuk kasus penggunaan ini untuk meninggalkan Lerna dan menggunakan repositori umum berbasis GitHub?

Answer 1

Saya tidak tahu apakah ini adalah pendekatan yang paling sederhana tetapi saya bisa membuatnya berfungsi dengan menambahkan ruang kerja Yarn.

Di package.json utama saya menambahkan:

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

Di Lerna.json saya menambahkan:

  "useWorkspaces": true,

Dari root tsconfig.json saya menghapus:

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