Monorepo setup: unable to pin Typescript version relative to working directory

[AlexandreBonaventure]

Version

4.1.2

Reproduction link

https://github.com/AlexandreBonaventure/ts-monorepo-repro

Environment info

-

Steps to reproduce

I know this not strictly a vue-cli bug but in a monorepo setup (using yarn workspaces), I am unable to pin a specific version of typescript because there is seemingly no way to provide a configuration to explicitly do so. Basically, here we have to rely on node module resolution and package manager which is not deterministic.

Scenario 1: bare workspace setup

|_ node_modules
  |_ @vue
  |_ ts-loader
  |_ typescript@3.7 <------ this typescript will always be used when compiling repro1 AND repro2
|_ apps
  |_ repro1 (requires typescript@3.7)
  |_ repro2 (requires typescript@3.5)
    |_ node_modules/typescript@3.5 <-- this one should be used but because of @vue packages being hoisted up in the root, it won't

Scenario 2: using nohoist option

|_ node_modules
|_ apps
  |_ repro1 (requires typescript@3.7)
  |_ repro2 (requires typescript@3.5)
    |_ node_modules
        |_ @vue
           |_cli-plugin-typescript
              |_ node_modules
                |_ typescript@3.7 <------ this typescript will be used by ts-loader is coming from devDepedencies of cli-plugin-typescript 
                |_ ts-loader
       |_ typescript@3.5

What is expected?

Ability to have control on using a typescript version specifically for each project

What is actually happening?

Difficult to do so

---

possible solutions could be :

• plugin option to provide typescript binaries by ourselves
• remove typescript devDepedencies in cli-plugin-typescript so we can use the yarn nohoist option

[yoyo930021]

I think you can try resolutions in package.json.
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

{
  "resolutions": {
    "typescript" : "^3.7.4"
  }
}

[AlexandreBonaventure]

@yoyo930021 thanks, although I already tried and it is not helping since it is the same outcome as scenario 2

[haoqunjiang]

• remove typescript devDepedencies in cli-plugin-typescript so we can use the yarn nohoist option

I don't understand what this means. Transitive devDependencies won't be installed in the project anyway.

[yoyo930021]

I understand this problem when I also try to use monorepo.

Temporary solutions:

// vue.config.js
chainWebpack: config => {
  config
    .plugin('fork-ts-checker')
    .tap(args => {
      args[0].typescript = require.resolve('typescript')

      return args
    })
  config.module
    .rule('ts')
    .use('ts-loader')
    .tap((args) => {
      args.instance = require('typescript')
      return args
    })
  config.module
    .rule('tsx')
    .use('ts-loader')
    .tap((args) => {
      args.instance = require('typescript')
      return args
    })
}

[frontendphil]

Ran into a similar issue. Since the typescript plugins resolve both typescript and the tsconfig.json relative from where it was installed (which node_modules folder it ended up in). Now my (intentionally) in base tsconfig.json in the root of my monorepo is used. However, what I'd want is that the tsconfig.json from the package where the CLI command was invoked is used.

It would already help if I could provide the path to the tsconfig.json that I'd like it to use manually. Because it is not even guaranteed that the file will be called tsconfig.json.