title: "Cannot find module 'react'" and "tsconfig.json not found"
body: <p>I'm trying to build a workspace based application with NodeJS and React using TypeScript. I did configured a <code>package.json</code> on the root directory and used the workspaces model to create both, server and client applications. Unfortunately I got stuck on a problem with VsCode that is trying to resolve the <code>tsconfig.json</code> file to the root directory and not inside the project folder.</p>
  <p>This is my structure:</p>
  <pre><code>project-root
  ├── .vscode
  │   └── settings.json
  ├── client
  │   ├── .eslintrc.js
  │   ├── package.json
  │   ├── src
  │   │   └── App.tsx
  │   ├── tsconfig.json
  │   └── yarn.lock
  ├── package.json
  └── server
      └── ...
  </code></pre>
  <p>And here are the content of the above files.</p>
  <hr />
  <p><code>.vscode/settings.json</code>:</p>
  <pre class="lang-js prettyprint-override"><code>{
      &quot;javascript.validate.enable&quot;: false,
      &quot;editor.tabSize&quot;: 4,
      &quot;eslint.enable&quot;: true,
      &quot;eslint.packageManager&quot;: &quot;yarn&quot;,
      &quot;eslint.codeActionsOnSave.mode&quot;: &quot;all&quot;,
      &quot;eslint.workingDirectories&quot;: [
          { &quot;directory&quot;: &quot;../server&quot;, &quot;changeProcessCWD&quot;: true },
          { &quot;directory&quot;: &quot;../client&quot;, &quot;changeProcessCWD&quot;: true }
      ],
  }
  </code></pre>
  <hr />
  <p><code>project-root/package.json</code>:</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;name&quot;: &quot;root-project&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;author&quot;: &quot;Rhuan Karlus Silva&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;workspaces&quot;: {
      &quot;packages&quot;: [
        &quot;server&quot;,
        &quot;client&quot;
      ]
    }
  }
  </code></pre>
  <hr />
  <p><code>project-root/client/.eslintrc.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      env: {
          browser: true,
          es6: true,
          jest: true,
      },
      extends: [
          'react-app',
          'airbnb',
          'plugin:@typescript-eslint/recommended',
          'prettier/@typescript-eslint',
      ],
      globals: {
          Atomics: 'readonly',
          SharedArrayBuffer: 'readonly',
      },
      parserOptions: {
          ecmaFeatures: {
              jsx: true,
          },
          ecmaVersion: 2018,
          sourceType: 'module',
          project: 'tsconfig.json',
      },
      plugins: ['react', 'import', 'jsx-a11y'],
      rules: {
          'react/jsx-filename-extension': [
              'error',
              {
                  extensions: ['.tsx'],
              },
          ],
          &quot;import/prefer-default-export&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/explicit-function-return-type&quot;: &quot;off&quot;,
          &quot;@typescript-eslint/explicit-member-accessibility&quot;: &quot;off&quot;,
          &quot;indent&quot;: [&quot;error&quot;, &quot;tab&quot;],
          &quot;no-tabs&quot;: [&quot;error&quot;, { allowIndentationTabs: true }],
          &quot;react/jsx-indent&quot;: [2, 'tab', {
              checkAttributes: true,
              indentLogicalExpressions: true
          }]
      },
      settings: {
          'import/parsers': {
              '@typescript-eslint/parser': ['.ts', '.tsx'],
          },
          'import/resolver': {
              typescript: {},
          },
      },
  };
  </code></pre>
  <hr />
  <p><code>project-root/client/package.json</code>:</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;name&quot;: &quot;project-client&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@emotion/core&quot;: &quot;^10.0.28&quot;,
      &quot;@emotion/styled&quot;: &quot;^10.0.27&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
      &quot;@types/jest&quot;: &quot;^24.0.0&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.0&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.0&quot;,
      &quot;emotion-theming&quot;: &quot;^10.0.27&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-scripts&quot;: &quot;3.4.1&quot;,
      &quot;typescript&quot;: &quot;~3.7.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&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;lint&quot;: &quot;../node_modules/.bin/eslint&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&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;@typescript-eslint/eslint-plugin&quot;: &quot;^2.33.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^2.33.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^18.1.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.11.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.20.2&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.2.3&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.1.3&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.20.0&quot;,
      &quot;prettier&quot;: &quot;^2.0.5&quot;
    }
  }
  </code></pre>
  <hr />
  <p><code>project-root/client/tsconfig.json</code>:</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;allowJs&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;
    },
    &quot;include&quot;: [
      &quot;src&quot;
    ]
  }
  </code></pre>
  <hr />
  <p>Alright now that I exposed the problem, I'm seeing two issues. Here are they:</p>
  <ol>
  <li>Cannot find module 'react'.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/mSgzS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mSgzS.png" alt="Cannot find module react" /></a></p>
  <ol start="2">
  <li>tsconfig.json not found</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/8pfTF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8pfTF.png" alt="tsconfig.json not found" /></a></p>
  <p>Now please note that the second (tsconfig.json) error is showing the path to the <code>project-root</code> directory and not to the <code>project-root/client</code> directory as it should point.</p>
  <p>So, am I figuring out something wrong? How can I solve this and get my workspaces working?</p>