Using different versions of a dependency in different packages of a Yarn Workspace

Question

I'm relatively new to using Yarn Workspaces and having a Monorepo set up, so forgive me if this has been answered. I don't believe I've found a clear answer on whether or not this is possible for a Monorepo set up using Yarn Workspaces.

I'd like to know if it's possible to use two different versions of a dependency (in my case TypeScript) in different packages and how to do that.

My goal is to lock a version of TypeScript (3.4.5) in Package A and use the root package.json's version (3.5.0) of TypeScript for all other Packages in this monorepo.

This is the folder structure. Ideally, PackageA would use 3.4.5 and PackageB/PackageC would use whatever version is defined in the root package.json

|-- packages
    |-- packageA
    |-- packageB 
    |-- packageC
|-- package.json

This is what I've tried so far:

I have tried adding nohoist in my workspace options in the webpack config, but I don't believe Package A is using TypeScript 3.4.5 as I am not getting the expected result. When I change the root package.json TypeScript version requirement to 3.4.5, thats when I get the correct result, it would be the best case scenario if I could keep using the latest TS for all other packages but keep the lower version for Package A.

I've also tried adding a package.json in the PackageA folder where it defines "typescript": "3.4.5" as a devDependency. Yarn installs the right version in the PackageA folder, but it doesn't seem to use it.

I'm also pretty sure Yarn resolutions is not the right tool for this situation either as my packages aren't defined as dependencies in my package.json.

snippet of package.json
  "devDependenices: {
    ...,
    "webpack": "^4.34.0",
    "typescript": "3.5.0-rc",
    "yarn": "^1.15.2"
  },
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "packageA/typescript"
    ]
  }

If anyone's curious, PackageA needs to use TypeScript 3.4.5 because I need react-docgen-typescript to parse Prop values that exist on the Prop and not it's parent (i.e HTML attributes on a button would display as a prop). Here's a link to that issue.

Please let me know if any more information is needed for my project configuration! Appreciate the insight and advice :)

Answer 1

According to documentation, you have to add ** beside the package name to avoid hoisting the package. Documentation link here.
To only avoid hoisting for typescript:

"workspaces": {
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "packageA/typescript/**"
  ]
}

To avoid hoisting for typescript and it's dependencies as well:

"workspaces": {
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "packageA/typescript/**/**"
  ]
}