Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: use @repo/ pattern in math-helpers example, consistent with "getting started" and starter repo #7911

Merged
merged 1 commit into from
Apr 12, 2024
Merged

feat: use @repo/ pattern in math-helpers example, consistent with "getting started" and starter repo #7911

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/pages/repo/docs/handbook/sharing-code/internal-packages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ This sounds complex, but it's extremely easy to set up.

## Our first internal package

We're going to create a shared `math-helpers` package inside our monorepo.
We're going to create a shared `@repo/math-helpers` package inside our monorepo.

### 1. Create your monorepo

Expand All @@ -44,7 +44,7 @@ Create a `package.json`:

```json filename="packages/math-helpers/package.json"
{
"name": "math-helpers",
"name": "@repo/math-helpers",
"version": "0.0.1",
"dependencies": {
// Use whatever version of TypeScript you're using
Expand Down Expand Up @@ -95,7 +95,7 @@ We're now going to import the package and see what happens. Go into one of your
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"math-helpers": "*"
"@repo/math-helpers": "*"
}
}
```
Expand All @@ -104,7 +104,7 @@ We're now going to import the package and see what happens. Go into one of your
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"math-helpers": "*"
"@repo/math-helpers": "*"
}
}
```
Expand All @@ -113,7 +113,7 @@ We're now going to import the package and see what happens. Go into one of your
```jsonc filename="apps/web/package.json"
{
"dependencies": {
"math-helpers": "workspace:*"
"@repo/math-helpers": "workspace:*"
}
}
```
Expand All @@ -122,18 +122,18 @@ We're now going to import the package and see what happens. Go into one of your

[Install all packages from root](/repo/docs/handbook/package-installation) to ensure that dependency works.

Now add an import from `math-helpers` into one of your app's source files:
Now add an import from `@repo/math-helpers` into one of your app's source files:

```diff
+ import { add } from "math-helpers";
+ import { add } from "@repo/math-helpers";

+ add(1, 2);
```

You'll likely see an error!

```
Cannot find module 'math-helpers' or its corresponding type declarations.
Cannot find module '@repo/math-helpers' or its corresponding type declarations.
```

That's because we've missed a step. We haven't told our `math-helpers/package.json` what the entry point to our package is.
Expand All @@ -144,7 +144,7 @@ Go back to `packages/math-helpers/package.json` and add a field: `exports`:

```json filename="packages/math-helpers/package.json"
{
"name": "math-helpers",
"name": "@repo/math-helpers",
"exports": {
".": "./src/index.ts"
},
Expand All @@ -154,7 +154,7 @@ Go back to `packages/math-helpers/package.json` and add a field: `exports`:
}
```

Now, anything that imports our `math-helpers` module will be pointed directly towards the `src/index.ts` file - _that's_ the file that they will import.
Now, anything that imports our `@repo/math-helpers` module will be pointed directly towards the `src/index.ts` file - _that's_ the file that they will import.

Go back to `apps/web/pages/index.tsx`. The error should be gone!

Expand Down Expand Up @@ -203,7 +203,7 @@ The fix is simple - we need to tell Next.js to bundle the files from certain pac
```ts filename="apps/web/next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['math-helpers'],
transpilePackages: ['@repo/math-helpers'],
};

module.exports = nextConfig;
Expand All @@ -221,7 +221,7 @@ The fix is simple - we need to tell Next.js to bundle the files from certain pac

### 7. Summary

We are now able to add any amount of code into our `math-helpers` package, and use it in any app in our monorepo. We don't even need to build our package - it just works.
We are now able to add any amount of code into our `@repo/math-helpers` package, and use it in any app in our monorepo. We don't even need to build our package - it just works.

This pattern is extremely powerful for creating pieces of code that can be easily shared between teams.

Expand Down