DEV Community

TypeScript + Yarn Workspace Monorepo

t7yang on March 15, 2020

When you have serveral highly coupled projects which you want to organize them together, you can consider a monorepo. Yarn (1.x) provide the works...
Read full post
Collapse
 
ivawzh profile image
Ivan Wang •

Thanks for the nice article. Wondering if you also have experience of implementing hot reload with TS composite approach? For the context, I am particularly interested at NextJS hot reload when shared module (aka package or workspace) updated. Thanks in advance.

Collapse
 
t7yang profile image
t7yang •

I'm not working with NextJS before, but I don't think they going to support this.
github.com/vercel/next.js/issues/8708

Collapse
 
wiseintrovert_31 profile image
Wise Introvert •

Great article. Can you please help me with this error: Could not find a declaration file for module '@my-organisation/common'. I followed your article to the teeth but can't seem to find a solution to this issue.

Collapse
 
t7yang profile image
t7yang •

You can check the node_modules folder first to make sure @my-organisation/common existed. Somehow after yarn install / update some packages just "disappear". If so, you can do a yarn install --force to force yarn install again.

Collapse
 
aralroca profile image
Aral Roca •

In my case I checked an exist inside the node_modules, but without the dist folder.

Image description

shared package tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "composite": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": [
    "src"
  ]
}
Enter fullscreen mode Exit fullscreen mode

and shared package.json:

{
  "name": "shared",
  "version": "1.0.0",
  "license": "MIT",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "devDependencies": {
    "typescript": "4.9.5"
  }
}
Enter fullscreen mode Exit fullscreen mode

Do you know why this can happen? Thanks!

Thread Thread
 
aralroca profile image
Aral Roca •

@t7yang I updated your example from typescript 3.8.3 to 4.9.5 and is not working either. Do you know how to fix it for TypeScript v.4.9.5?

Thread Thread
 
t7yang profile image
t7yang •

have you run the build cmd? you need to build at least once to generate the dist folder. the final solution is run the tsc in your shared folder.

Collapse
 
wiseintrovert profile image
wiseintrovert •

Thanks!

Collapse
 
cyberwombat profile image
Yashua •

For those that get an issue with Cannot find module "shared" or its corresponding type declarations when it is not yet built when you try to build the backend... I had this in my base config: "lib": ["es6", "es2015"],. Changing it to "lib": ["ESNext"], fixed the issue.

Collapse
 
shelob9 profile image
Josh Pollock •

This is my go-to, quick guide to setting up TypeScript in a monorepo. Thank you

Collapse
 
nasht profile image
Nathan Hazout •

Do you have insights on how to dockerize / deploy such a monorepo? How would you setup the docker files?

Collapse
 
t7yang profile image
t7yang •

You can reference to this article xfor.medium.com/yarn-workspaces-an...

Collapse
 
marais profile image
Marais Rossouw •

Great read man! Might also be worth mentioning here that projectReferences are a thing - helps speed up building too.

Collapse
 
dmytro_dmytro_dmytro profile image
Dmytro Dmytro •

Sounds pro! Thanks. In the following article, I consider the same topic, but from the aliases issue perspective: webman.pro/blog/how-to-setup-types....

Collapse
 
ferlopezm94 profile image
Fernando López Martínez •

Thanks for the article! Wondering why you didn't need to add the "shared" package as a dependency in the package.json of "backend"?

Collapse
 
t7yang profile image
t7yang •

That because the "node module resolution rule".
node will keep finding upward until found or failed.