yarn workspaces adds empty folder instead of local dependency

Question

Settings

Windows 11
WSL 2 terminal

My repo

my basic directory structure looks like this:

backend
  src
  package.json
frontend
  apps
    admin
      src
      package.json
    user-type-1
      src
      package.json
  core
    utils
    common
  package.json
package.json
yarn.lock

my root package.json looks like this:

{
  "private": true,
  "name": "root",
  "workspaces": {
    "packages": [
      "backend",
      "frontend"
    ]
  },
  "engines": {
    "node": "^20.5.1"
  },
  "packageManager": "[email protected]",
  "scripts: { ... }
  "dependencies": {
    "typescript": "^5.1.6",
    ...
  }
  ...
}

my backend package.json looks like this:

{
  "private": true,
  "name": "@project/backend",
  "version": "1.0.0",
  "scripts: { ... }
  ...
}

my frontend package.json looks like this:

{
    "name": "@project/frontend",
    "private": true,
    "version": "1.0.0",
    "workspaces": {
        "packages": [
            "apps/admin",
            "apps/user-type-1",
            "core"
        ]
    },
    "engines": {
        "node": "^20.5.1"
    },
    "packageManager": "[email protected]",
    "scripts: { ... },
    "dependencies": {
      "@project/backend": "1.0.0",
      ...
    }
    ...
}

The backend has a bunch of things that the frontend needs, so I want to add the backend ad a dependency for the frontend.
I tried running the following:

yarn workspace @project/frontend add @project/[email protected]

Expected Behavior

• A folder @project/backend is added inside the frontend's node_modules
• I am able to access backend types and more with import
• no errors are thrown in the process

Actual Behaviour

• A folder named @project is created inside frontend's node-modules, but it's empty
• I cannot access backend types when using import
• no errors are thrown in the process

Importing the backend from the frontend was previously working, so I am guessing this is not an issue with yarn but with some changes that I made.
However I was unable to find out what caused the yarn to fail, even after returning the package.json mostly the same as it was before.

Answer 1

I will update the answer if I manage to find out more about this, please share if you have any clues

The issue seems to be with yarn wsl 2 adaptation.
I am not sure if the same happens on Ubuntu, but apparently yarn doesn't create the folders when running on wsl (not sure if it is intentional).

Once you run yarn install on wsl the local node_module folders will remain empty even after re-running the command on powershell unless you delete the yarn.lock and node_modules.

After cloning and testing on MacOS there were no such issues.

I guess deleting the yarn.lock and re-running yarn install on powershell instead of wsl could be counted as a solution, but it doesn't sound right...

Also keep in mind that even if the folder is empty you will still be able to deploy the server locally (how??) yarn run dev seemed to be working even with the red underlines on all the imports due to the empty node_module package folder

Answer 2

To add the backend as a dependency for the frontend and make it accessible through imports, you need to publish the backend workspace as a package.

First, navigate to the backend directory:

cd backend

Then, use the yarn publish command to publish the backend workspace as a package:

yarn publish

This will create a new version of the backend package and make it available for installation. Note that each time you want to update the backend package and use the latest changes, you'll need to publish a new version.

After publishing the backend package, you can add it as a dependency in the frontend workspace. To do this, navigate to the root of your project and run the following command:

yarn workspace @project/frontend add @project/[email protected]

Make sure to replace 1.0.0 with the appropriate version number you published for the backend package.

# Use this command to upgrade the version.
yarn publish --new-version 1.0.0

This will add the backend package to the frontend's node_modules directory. You should then be able to access backend types and other functionalities by using import statements in your frontend code.

Other Solution

Another solution is to directly reference the local backend directory as a dependency in the frontend workspace.

First, navigate to the frontend directory:

cd frontend

Then, run the following command to add the backend as a dependency in the frontend workspace using a file reference:

yarn workspace @project/frontend add file:./../backend

This will create a symbolic link to the backend directory inside the frontend's node_modules directory. Now, you should be able to access backend types and other functionalities by using import statements in your frontend code.