Can't add local package in a monorepo lerna project

I need advice to debug deploy Netlify App.

Hi people! I have a monorepo that uses yarn workspaces + lerna. In my “frontend” package, I want to add the “tsdx-test” which is another package located in a sibling folder. Here is the folder structure:

├── packages
│ ├── frontend
│ │ └── {gatsby files}
│ └── tsdx-test
│ │ └── {tsdx files}

However, in every build it says that it couldn’t find “tsdx-test”. Perhaps it is trying to search it in npm repository? I also tried to change the build command to “npx lerna add tsdx-test --scope=frontend && yarn workspace frontend run build” and it still fails. Can you help me with it?

Thanks in advance! Stay safe!

hey there,

could you share your package.json please?

Sure perry!

root package.json

{
  "name": "name",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "lerna": "^3.18.1"
  },
  "scripts": {
    "postinstall": "lerna bootstrap",
    "clean": "lerna clean",
    "dev": "lerna run dev --parallel --stream",
    "dev:frontend": "yarn workspace frontend run dev",
    "dev:backend": "yarn workspace backend run dev",
    "build:frontend": "yarn workspace frontend run build",
    "test": "lerna run test",
    "format": "lerna run format"
  }    
}

frontend package.json

{
  "name": "frontend",
  "private": false,
  "version": "0.0.2",
  "author": "Luiz Cieslak",
  "dependencies": {
    "@chakra-ui/core": "^0.7.0",
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "dotenv": "^8.2.0",
    "emotion-theming": "^10.0.27",
    "gatsby": "2.21.16",
    "gatsby-image": "2.4.2",
    "gatsby-plugin-emotion": "^4.1.13",
    "gatsby-plugin-manifest": "2.4.2",
    "gatsby-plugin-netlify": "2.3.2",
    "gatsby-plugin-offline": "3.2.1",
    "gatsby-plugin-preact": "^3.1.20",
    "gatsby-plugin-react-helmet": "^3.0.6",
    "gatsby-plugin-robots-txt": "^1.5.0",
    "gatsby-plugin-sharp": "2.6.1",
    "gatsby-plugin-sitemap": "^2.2.30",
    "gatsby-plugin-typescript": "^2.1.15",
    "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
    "gatsby-source-filesystem": "^2.1.35",
    "gatsby-transformer-sharp": "^2.3.2",
    "preact": "^10.0.5",
    "query-string": "^6.12.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "tsdx-test": "^0.0.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "serve": "gatsby serve",
    "test": "jest",
    "format": "prettier --write src/**/*.{ts,tsx,js,jsx,css}",
    "gql-gen": "gql-gen --config codegen.yml",
    "clean": "gatsby clean"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.0.0",
    "@graphql-codegen/fragment-matcher": "^1.8.3",
    "@graphql-codegen/typescript": "^1.0.0",
    "@graphql-codegen/typescript-operations": "^1.0.0",
    "@testing-library/jest-dom": "^4.1.0",
    "@testing-library/react": "^9.1.4",
    "@types/jest": "^24.0.14",
    "@types/node": "^12.0.2",
    "@types/react-helmet": "^5.0.14",
    "@typescript-eslint/eslint-plugin": "^1.10.2",
    "@typescript-eslint/parser": "^1.10.2",
    "babel-jest": "^24.9.0",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.16.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "prettier": "^1.19.0",
    "ts-jest": "^24.1.0",
    "tslint": "^5.20.1",
    "tslint-react": "^4.1.0",
    "typescript": "^3.7.2"
  }
}

(notice the tsdx-test in depedencies)

tsdx-test package.json

{
  "name": "tsdx-test",
  "private": false,
  "version": "0.0.1",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "tsdx watch",
    "dev": "tsdx watch",
    "build": "tsdx build",
    "test": "tsdx test",
    "lint": "tsdx lint",
    "format": "prettier --write src/**/*.{ts,tsx,js,jsx,css}",
    "prepare": "tsdx build"
  },
  "dependencies": {
    "dotenv": "8.2.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "author": "luizcieslak",
  "module": "dist/tsdx-test.esm.js",
  "devDependencies": {
    "@types/jest": "24.9.1",
    "@types/node": "12.12.34",
    "husky": "^4.2.5",
    "tsdx": "^0.13.2",
    "tslib": "^1.11.2",
    "tslint-config-prettier": "1.18.0",
    "typescript": "^3.8.3"
  }
}

Hey! To be honest, our monorepo support doesn’t support Lerna /Yarn workspaces very well yet and I can’t think of a workaround for your workflow. I’m linking to a few other forum posts that may be helpful though, just in case:

@luizcieslak there’s a lot of things that could be causing this, so it’s hard to say what the issue is from just the package.json files, but I can tell you that I have a yarn workspace/lerna monorepo setup which has a package which is a gatsby site that successfully pulls in sibling packages and builds on netlify. my monorepo is fairly beefy (and all in typescript), but if it helps you can poke around the code, it’s open source.

The interesting bits for you would be the ./packages/evans package, which is a gatsby site. It pulls in a bunch of sibling packages, but as an example, it heavily uses a sibling package ./packages/ui which is basically just a ton of react components shared across the monorepo. Not sure if it will help, but, fwiw:

1 Like

Here’s the solution if anyone stumble upon this scenario (monorepo with local TS packages):

You need to build them all first before building your website.

netlify.toml example:

[build]
  command = "npx lerna build" # build not only frontend, but all TS packages with a build script.
  functions = ""
  publish = "packages/frontend/public"

Besides that, leave it all in a default lerna + yarn workspaces configuration. It handles all the local and external packages gracefully.

1 Like

Thanks @jaredh159! I realized the issue here is that all of my packages are in TS and need to build (and then generate the dist folder) before being used by sibling packages.

1 Like

Hi folks,
Wanted to share an exciting update about Yarn workspaces: we’ve made improvements to how we cache dependencies for these projects. You can try out our new caching by creating an environment variable called NETLIFY_YARN_WORKSPACES and setting it to "true"

We want your feedback before we roll this out more widely- please let us know in this thread what your experience is like! More about the change in that thread as well.