yarn workspace triggers errors in a different package - node.js

Question

I am trying to setup yarn workspace in an existing project. When running yarn workspace #project/telemetry start:dev TS errors are triggered in a completely different project #project/web.
error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
My project structure is the following:
project
/node_modules
/packages
/common
/web
/telemetry
tsconfig.json
yarn.lock
I was able to run yarn workspace #project/web dev (Next.js) application after some tweaking with tsconfig and resolution. I was able to share a common lib to it as well.
The next step is to share the same common lib with telemetry (nest.js) service, but when running the service TS errors are triggered for /web somehow even though /telemetry never uses anything from /web.
project/package.json
{
"name": "#project/root",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"workspaces": [
"packages/*"
],
"resolutions": {
"#types/react-dom": "^17.0.11",
"#types/react": "17.0.38"
}
}
project/tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"ESNext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"types.d.ts"
]
}
project/packages/web/package.json
{
"name": "#project/web",
"private": true,
"version": "1.0.0",
"scripts": {
"dev": "env-cmd -f environments/.env.development next dev",
},
"dependencies": {
"#project/common": "*", // Shared common
"micro": "^9.3.4",
"next": "12.2.0",
"next-connect": "^0.11.0",
"react": "17.0.2",
"react-dom": "17.0.2",
},
"devDependencies": {
"#babel/core": "^7.16.7",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/enzyme": "^3.10.11",
"#types/jest": "^27.4.0",
"#types/node": "17.0.8",
"#types/react": "17.0.38",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.20.0",
"#typescript-eslint/parser": "^5.20.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"babel-loader": "^8.2.3",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"eslint": "^8.6.0",
"eslint-config-next": "12.0.7",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"fork-ts-checker-webpack-plugin": "^6.5.0",
"husky": "^7.0.0",
"jest": "^27.4.7",
"lint-staged": "^12.1.7",
"next-transpile-modules": "^9.1.0",
"tsc-files": "^1.1.3",
"typescript": "4.5.4"
},
"lint-staged": {
"**/*.{ts,tsx}": [
"tsc-files --noEmit --pretty"
],
"*.{js,ts,jsx,tsx}": [
"eslint --cache --fix"
]
}
}
project/packages/web/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.css"
],
"exclude": ["node_modules"],
"typeRoots": [
"./global.d.ts",
"./node_modules/#types"
]
}
project/packages/telemetry/package.json
{
"name": "#project/telemetry",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"scripts": {
"start:dev": "nest start --watch"
},
"dependencies": {
"#project/common": "*", // Shared common
"#nestjs/common": "^9.0.0",
"#nestjs/config": "^2.2.0",
"#nestjs/core": "^9.0.0",
"#nestjs/mapped-types": "*",
"#nestjs/mongoose": "^9.2.0",
"#nestjs/platform-express": "^9.0.0",
"cache-manager": "^4.0.0",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"express": "^4.18.1",
"helmet": "^6.0.0",
"mongoose": "^6.6.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0"
},
"devDependencies": {
"#nestjs/cli": "^9.0.0",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#types/express": "^4.17.13",
"#types/jest": "28.1.8",
"#types/node": "^16.0.0",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "28.1.3",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "28.0.8",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "4.1.0",
"typescript": "~4.7.4"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
project/packages/telemetry/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": false,
"noImplicitAny": false,
"strictBindCallApply": false,
"forceConsistentCasingInFileNames": false,
"noFallthroughCasesInSwitch": false
}
}