title: Sharing typescript code between two projects in a monorepo with yarn 2 workspaces
body: <p>I want to set up a project with a client part (react-app), a server part (express) and a shared library (utils) in typescript. I use yarn 2 workspaces and wanted to avoid using larna (if possible). Unfortunately, I have not been able to make it work since few days (and a lot of googling...). When trying to run the client app I receive the error:</p>
  <p>Cannot find module 'utils' or its corresponding type declarations.  TS2307</p>
  <p>Does anybody know what I am doing wrong?</p>
  <p>This is my project structure:</p>
  <ul>
  <li>.yarn</li>
  <li>packages
  <ul>
  <li>client (created  with create-react-app)</li>
  <li>utils (created with yarn tsc --init)</li>
  <li>server</li>
  </ul>
  </li>
  <li>.pnp.js</li>
  <li>.yarnrc.yml</li>
  <li>package.json</li>
  <li>yarn.lock</li>
  </ul>
  <p>package.json (root):</p>
  <pre><code>{
    &quot;private&quot;: true,
    &quot;name&quot;: &quot;monorepo with shared library and yarn 2 workspaces&quot;,
    &quot;workspaces&quot;: [
      &quot;packages/*&quot;
    ],
    &quot;scripts&quot;: {
      &quot;client&quot;: &quot;yarn workspace client start&quot;,
      &quot;server&quot;: &quot;yarn workspace server start&quot;,
      &quot;prepare&quot;: &quot;yarn workspace utils build&quot;
    }
  }
  </code></pre>
  <p>utils/package.json:</p>
  <pre><code>{
      &quot;name&quot;: &quot;utils&quot;,
      &quot;private&quot;: true,
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;dist/index.js&quot;,
      &quot;types&quot;: &quot;dist/index.d.ts&quot;,
      &quot;files&quot;: [
          &quot;dist&quot;
      ],
      &quot;devDependencies&quot;: {
          &quot;@types/node&quot;: &quot;^14.14.22&quot;,
          &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.14.0&quot;,
          &quot;@typescript-eslint/parser&quot;: &quot;^4.14.0&quot;,
          &quot;eslint&quot;: &quot;^7.18.0&quot;,
          &quot;eslint-config-prettier&quot;: &quot;^7.2.0&quot;,
          &quot;eslint-plugin-prettier&quot;: &quot;^3.3.1&quot;,
          &quot;prettier&quot;: &quot;^2.2.1&quot;,
          &quot;typescript&quot;: &quot;^4.1.3&quot;
      },
      &quot;scripts&quot;: {
          &quot;build&quot;: &quot;tsc -b --verbose&quot;
      }
  }
  </code></pre>
  <p>utils/src/index.ts:</p>
  <pre><code>function test() {
      console.log(&quot;this is a function from the shared library &quot;);
  }
  
  export = {
      test
  }
  </code></pre>
  <p>client/package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.53&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-refresh&quot;: &quot;^0.9.0&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;typescript&quot;: &quot;^4.0.3&quot;,
      &quot;utils&quot;: &quot;1.0.0&quot;,                 // also tried &quot;utils&quot;: &quot;workspace:packages/utils&quot;
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start --verbose&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;eslint-config-react-app&quot;: &quot;^6.0.0&quot;
    }
  }
  </code></pre>
  <p>I added a simple import in the client/src/App.tsx for testing:</p>
  <pre><code>import React from &quot;react&quot;;
  import logo from &quot;./logo.svg&quot;;
  import &quot;./App.css&quot;;
  import shared from &quot;utils&quot;;
  
  ...
  </code></pre>
  <p>Thank you!</p>