[How To] Use with yarn2

[elby22]

When installing ts-patch with Yarn 2 (pnp) I get errors regarding undeclared dependencies for glob and resolve:
Error: ts-patch tried to access glob, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

When I resolve these dependencies using my .yarnrc.yaml file in this way:

packageExtensions:
  "ts-patch@*":
    "dependencies":
      "glob": "*"
      "resolve": "*"
      

I get the following error:
[!] [BackupError]: Error backing up tsc.js - Couldn't create backup directory. EROFS: read-only filesystem, mkdir '/node_modules/typescript/lib-backup'

Is there a way to support Yarn 2 with ts-patch?

[nonara]

I investigated this a bit today and ended up fighting for awhile with odd issues. It seems that yarn2 patching is a little temperamental right now, so if you have any problems, let me know. This should work.

These instructions are for yarn v3.

package.json

{
  "dependencies": {
    "ts-patch": "^1.4.4", // You need to use >=1.4.4. I fixed the missing deps issue + another relevant issue
    "typescript": "4.4.2"
  }
}

Install steps

# Install — Strangely, we have to call it twice to make the next cmd work
$ yarn install && yarn install

# Generate patchable dir
$ yarn patch typescript@npm:4.4.2
➤ YN0000: Package typescript@npm:4.4.2 got extracted with success!
➤ YN0000: You can now edit the following folder: /tmp/xfs-ce018a91/user
➤ YN0000: Once you are done run yarn patch-commit /tmp/xfs-ce018a91/user and Yarn will store a patchfile based on your changes.
➤ YN0000: Done in 1s 447ms

# Patch with ts-patch — Note: your directory will be different. Copy and paste what the last command output
$ yarn run ts-patch -d /tmp/xfs-ce018a91/user install
[+] ts-patch installed!

# Commit our patch to yarn
$ yarn patch-commit -s /tmp/xfs-ce018a91/user

# Cleanup
$ rm -rf /tmp/xfs-ce018a91/user

# Start using our patched version
$ yarn install

# Confirm it worked
$ yarn run ts-patch c
Checking TypeScript v4.4.2 installation in /your-module/.yarn/cache/typescript-patch-dc146214d1-9745be4574.zip/node_modules/typescript

[+] tsc.js is patched with ts-patch version 1.4.4
[-] tsserverlibrary.js is not patched.
[+] typescript.js is patched with ts-patch version 1.4.4
[-] typescriptServices.js is not patched.
[-] tsserver.js is not patched.

Native Support via CLI

I don't have the bandwidth right now to add this into v1, but if someone wants to do a PR, it should be pretty straight-forward to implement.

1. Add --yarn2 flag to ts-patch to enable it
2. Use yarn's patch API
3. Be sure to clean up temp dir after

[elby22]

Thanks @nonara. I was also able to accomplish this by using typescript as an unplugged dependency. I might take a crack at a PR if we decide to use that approach.

[jasonkuhrt]

For others: I am using Yarn 2 in Yarn 1 compat mode (meaning node_modules node linker).

I had to use postinstall hook in addition to prepare script.

[jekozyra]

@jasonkuhrt Could you explain more about the postinstall hook?

[finnmerlett]

@nonara @elby22 I was super excited to read this, I've been really wanting to use the custom transformer typescript-is with my yarn3 create-react-app project. I followed your steps exactly, using the exact same versions of ts-patch and typescript under dependancies, and it all appeared to work. The only indication that something might not be right was the following message on yarn install following the patch-commit, where it stated Cannot apply hunk #1:

➤ YN0000: ┌ Fetch step
➤ YN0013: │ typescript@patch:typescript@npm%3A4.4.2#.yarn/patches/typescript-npm-4.4.2-8c784d6e94::version=4.4.
➤ YN0013: │ typescript@patch:typescript@patch%3Atypescript@npm%253A4.4.2%23.yarn/patches/typescript-npm-4.4.2-8
➤ YN0013: │ typescript@patch:typescript@npm%3A4.4.2#.yarn/patches/typescript-npm-4.4.2-8c784d6e94::version=4.4.
➤ YN0066: │ typescript@patch:typescript@patch%3Atypescript@npm%253A4.4.2%23.yarn/patches/typescript-npm-4.4.2-8c784d6e94%3A%3Aversion=4.4.2&hash=e4c573&locator=main-pwa%2540workspace%253A.#~builtin<compat/typescript>::version=4.4.2&hash=ddd1e8: Cannot apply hunk #1

The test with yarn run ts-patch c gave the correct output so I was hopeful. Yet when I started the dev server react-scripts start I was met with an endless stream of errors reported on the console (literally it would not stop scrolling at lightning speed, even as I was mashing ctrl-c), seemingly reporting an error on every single line of my code! I think it was that typescript (as patched) was unable to find any modules at all.

I tried unplugging the typescript module before patching, but this had no effect. I tried the latest version of ts-patch and typescript and that failed too, in exactly the same way.

I did notice that when running yarn why typescript that the typescript was patched already - I think it was mentioned on another thread here, that it was due to modifying for pnp support? If so, my guess would be that the built-in patch was applied second and failed. This checks out, as the Cannot apply hunk #1 warning appeared after the only patch report line that contained builtin<compat/typescript>, the signifier for the the internal pnp patch. This would explain why typescript wasn't able to find any of the modules - without the pnp patch it would probably be looking for them in the non-existent node_modules.

Anyway, if you have any advice on how to fix this, I would love to hear it. Getting those sweet sweet run-time type-checks up and running would be an absolute dream.

[nonara]

@finnmerlett if you can put together a quick reproduction repo, I'll have a look and see if I can help you get it going!

[finnmerlett]

@nonara Thank you so much for such a speedy reply, and sorry I took a while to get back to you - I've been quite busy with work. Anyway, I've set it up here https://github.com/finnmerlett/ts-patch-cra-test. Running yarn start works just fine, but following your steps above to the letter produces that Cannot apply hunk #1 warning, and then yarn start gives many compile errors. VSCode also highlights the errors, it appears that it cannot find any of the modules.

You can check through the commits on the repo to see how I set it up, but essentially I've just done a create-react-app using their latest alpha build, then set up Yarn 3 with P'n'P. Many thanks in advance!

[finnmerlett]

@nonara Did you find any leads with this?

[nonara]

@finnmerlett Sorry. Was swamped and this fell through the cracks. I'll take a look tomorrow and let you know!

[nonara]

@finnmerlett Ok. I cloned it and had a look. No errors applying hunk for me, but I do see the issue of it not resolving modules.

From what I understand, yarn 2 actually modifies common libraries in order to add support. If I recall correctly, it does do this for typescript automatically, as well.

As an aside, this seemed, to me, like a terrible route to attempt to solve the issue. I think a better route would be to use a loader to hook filesystem bindings (like we do with mock-fs) or better yet, to just submit a PR for node which provides zip support (allowing ability to treat a zip like a directory).

Anyway, that's more info than you need. My best guess on this is that some sort of compatibility modification made somewhere is broken. Maybe React is doing a CRC check on TS to add yarn support and it fails because it's modified (??) Hard to say. It's odd that this works outside of React.

In my opinion, yarn2's core ideas are excellent and necessary advancements for the node ecosystem. That said, not to be unkind to the developers, but their approach to implementing the ideas have been poorly thought out.

In any event, I'm sorry that it didn't work for you. I would recommend trying what other users have reported working for them using node_modules linker / unplugged dependency.

Best of luck to you!

[AlCalzone]

I would recommend trying what other users have reported working for them using node_modules linker / unplugged dependency

Since it might interest some readers here... After suffering through the ecosystem implications by yarn PnP, I switched to the new pnpm compatible linker they added in v3.1 and haven't looked back. Roughly the installation speed of PnP, but without any of these hacks necessary.