local server compiler does not catch TS errors

[jd2rogers2]

Bug Report

🔎 Search Terms

not breaking
not catching errors
compile false positive

🕗 Version & Regression Information

💻 Code

so the issue happens when we update react-map-gl dependency from 5.3.3 to 5.3.11
it has also happened when we updated @types/ramda from 0.27.36 to 0.27.39 (which we no longer use because of this issue)

we're in a yarn workspaced environment so multiple package.json and tsconfigs coming at you

// root package.json
{
  "name": "client-portal",
  "version": "1.21.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "checks": "yarn workspaces run checks",
    "checks:portal": "yarn workspace portal checks",
    "checks:baseui": "yarn workspace @premisedata/base-ui checks",
    "cy:ci": "start-test start:api 3001 start:server 3000 start:cypress:run",
    "cypress": "yarn workspace portal cypress",
    "deploy:qa": "scripts/deploy_all ${TAG} qa portal web-api",
    "deploy:prod": "scripts/deploy_all ${TAG} prod portal web-api",
    "lint": "yarn lint:es && yarn lint:css",
    "lint:css": "stylelint ./packages/**/*.css",
    "lint:es": "eslint ./packages/**/*.ts*",
    "postversion": "git push --tags && git push",
    "start": "yarn workspace portal start",
    "start:api": "yarn workspace web-api start",
    "start:server": "yarn workspace portal start",
    "start:cypress:run": "yarn workspace portal cy:run",
    "storybook": "start-storybook -p 6006",
    "prepare": "husky install"
  },
  "workspaces": {
    "packages": [
      "packages/apps/*",
      "packages/libs/*"
    ],
    "nohoist": [
      "**/jest",
      "**/jest/**"
    ]
  },
  "devDependencies": {
    "@babel/helper-call-delegate": "7.12.1",
    "@storybook/addon-actions": "6.0.28",
    "@storybook/addon-docs": "6.0.28",
    "@storybook/addon-knobs": "6.0.28",
    "@storybook/addons": "6.0.28",
    "@storybook/react": "6.1.15",
    "babel-loader": "8.1.0",
    "cypress": "6.8.0",
    "husky": "5.2.0",
    "start-server-and-test": "1.11.6"
  }
}

// root tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "pretty": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es2018",
    "lib": ["dom"]
  },
  "exclude": ["node_modules"],
  "include": ["packages/**/*.ts*"]
}

// workspace (local to where command runs) package.json
{
  "name": "portal",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@cubejs-client/core": "0.26.70",
    "@cubejs-client/react": "0.26.70",
    "@fullstory/browser": "1.4.9",
    "@premisedata/base-ui": "0.0.0",
    "@testing-library/jest-dom": "5.9.0",
    "@testing-library/react": "11.2.5",
    "@testing-library/user-event": "10.4.1",
    "@turf/turf": "6.3.0",
    "@types/amplitude-js": "6.0.0",
    "@types/classnames": "2.2.11",
    "@types/d3-array": "2.9.0",
    "@types/d3-ease": "2.0.0",
    "@types/d3-scale": "3.2.2",
    "@types/d3-scale-chromatic": "2.0.0",
    "@types/jest": "26.0.22",
    "@types/jsonwebtoken": "8.5.1",
    "@types/jspdf": "1.3.3",
    "@types/lodash.isequal": "4.5.5",
    "@types/lodash.omit": "4.5.6",
    "@types/moment": "2.13.0",
    "@types/node": "13.13.48",
    "@types/numeral": "2.0.1",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.3",
    "@types/react-infinite-scroller": "1.2.1",
    "@types/react-map-gl": "5.2.9",
    "@types/react-router-dom": "5.1.7",
    "@types/react-vis": "1.11.6",
    "@types/zxcvbn": "4.4.1",
    "amplitude-js": "7.3.3",
    "classnames": "2.2.6",
    "customize-cra": "1.0.0",
    "d3-array": "2.12.1",
    "d3-ease": "2.0.0",
    "d3-scale": "3.2.3",
    "d3-scale-chromatic": "2.0.0",
    "deck.gl": "8.4.11",
    "email-validator": "2.0.4",
    "firebase": "7.24.0",
    "free-email-domains": "1.0.10",
    "html2canvas": "1.0.0-rc.7",
    "iso-country": "2.0.0",
    "jest-canvas-mock": "2.3.1",
    "jsonwebtoken": "8.5.1",
    "jspdf": "2.3.1",
    "locale-codes": "1.3.1",
    "lodash.isequal": "4.5.0",
    "lodash.omit": "4.5.0",
    "mapbox-gl": "1.13.1",
    "moment": "2.29.1",
    "numeral": "2.0.6",
    "query-string": "6.14.1",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "react-hook-form": "6.15.5",
    "react-infinite-scroller": "1.2.4",
    "react-map-gl": "5.3.3",
    "react-password-strength-bar": "0.3.2",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.4",
    "react-simple-maps": "2.3.0",
    "react-use": "15.3.8",
    "react-vis": "1.11.7",
    "supercluster": "6.0.2",
    "trackjs": "3.7.6",
    "typescript": "3.9.7",
    "viewport-mercator-project": "7.0.1",
    "web-vitals": "0.2.4",
    "zxcvbn": "4.4.2"
  },
  "resolutions": {
    "@types/react": "17.0.3"
  },
  "scripts": {
    "build": "REACT_APP_GIT_TAG=`git describe --always` react-app-rewired build",
    "checks": "yarn lint && yarn run test --watch-all=false",
    "cy:ci": "start-server-and-test http-get://localhost:3000 cy:run",
    "cy:run": "yarn cypress run --spec 'cypress/integration/**/*.spec.js'",
    "cy:open": "yarn cypress open",
    "deploy": "VERSION=$(echo ${TAG:-latest} | sed 's/\\./-/g') && gcloud app deploy -q --project=${PROJECT:-web-app} --image-url=gcr.io/web-app/portal:${TAG:-latest} --version $VERSION app.yaml dispatch.yaml",
    "deploy:qa": "VERSION=$(echo ${TAG:-latest} | sed 's/\\./-/g') && gcloud app deploy -q --project=${PROJECT:-web-app-qa} --image-url=gcr.io/web-app/portal:${TAG:-latest} --version $VERSION app.yaml dispatch.yaml",
    "deploy:prod": "VERSION=$(echo ${TAG:-latest} | sed 's/\\./-/g') && gcloud app deploy -q --project=${PROJECT:-web-app-prod} --image-url=gcr.io/web-app/portal:${TAG:-latest} --version $VERSION app.yaml dispatch.yaml",
    "docker:build": "REACT_APP_GIT_TAG=`git describe --always` docker build --build-arg BUILD_NUMBER=${TRAVIS_BUILD_NUMBER} -t portal:${TAG:-latest} -f Dockerfile ../../..",
    "docker:push": "docker push gcr.io/${PROJECT:-web-app}/portal",
    "docker:start": "docker run -p 9003:8080 -it --rm --name portal portal",
    "docker:tag": "docker tag portal:${TAG:-latest} gcr.io/${PROJECT:-web-app}/portal:${TAG:-latest}",
    "eject": "react-scripts eject",
    "lint": "yarn lint:es && yarn lint:css",
    "lint:es": "eslint './src/**/*.ts*'",
    "lint:css": "stylelint './src/**/*.css'",
    "start": "REACT_APP_GIT_TAG=`git describe --always` REACT_APP_CUBE_HOST=http://localhost:4000 react-app-rewired start",
    "test": "react-app-rewired test --testPathPattern='.*/__tests__/.*.test.tsx?'"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "2.34.0",
    "@typescript-eslint/parser": "2.34.0",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "18.1.0",
    "eslint-plugin-cypress": "2.11.2",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "24.3.2",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.20.3",
    "eslint-plugin-react-hooks": "4.2.0",
    "history": "5.0.0",
    "react-app-rewired": "2.1.8",
    "start-server-and-test": "1.11.6",
    "stylelint": "13.9.0",
    "stylelint-config-css-modules": "2.2.0",
    "stylelint-config-standard": "20.0.0",
    "stylelint-order": "4.1.0"
  },
  "engines": {
    "node": ">14.0.0"
  }
}

// workspace (local to where command runs) tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

🙁 Actual behavior

when i run yarn start my server runs and does not catch any TS errors (in this example Cannot find name 'doesntexist'. TS2304)

also (from root)
i'd expect tsc command to catch errors

% tsc --project .    
node_modules/react-map-gl/src/components/interactive-map.d.ts:12:12 - error TS1005: ',' expected.

12   point: [x: number, y: number],
              ~

node_modules/react-map-gl/src/components/interactive-map.d.ts:12:23 - error TS1005: ',' expected.

12   point: [x: number, y: number],
                         ~

node_modules/react-map-gl/src/components/interactive-map.d.ts:13:21 - error TS1005: ',' expected.

13   lngLat: [longitude: number, latitude: number],
                       ~

node_modules/react-map-gl/src/components/interactive-map.d.ts:13:39 - error TS1005: ',' expected.

13   lngLat: [longitude: number, latitude: number],
                                         ~


Found 4 errors.

🙂 Expected behavior

I would expect my server not to compile due to errors that are caught. in this example Cannot find name 'doesntexist'. TS2304

also (from root)
tsc command catches errors

% tsc --project .
packages/apps/portal/src/__tests__/testHelpers.tsx:14:13 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: RouterProps | Readonly<RouterProps>): Router', gave the following error.
    Type 'MemoryHistory<State>' is missing the following properties from type 'History<unknown>': length, goBack, goForward
  Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error.
    Type 'MemoryHistory<State>' is not assignable to type 'History<unknown>'.

14     <Router history={history}>
               ~~~~~~~
....

[DanielRosenwasser]

Can you fill out the version information that you omitted? What version of TS are you using and what version of VS Code?

Also, does this still persist when you restart the editor?

[jd2rogers2]

1. Can you fill out the version information that you omitted?

2. What version of TS are you using and what version of VS Code?

3. Also, does this still persist when you restart the editor?

% tsc -v
Version 3.9.5

2. vscode = Version: 1.55.0
3. i restart my computer every week and we've seen this issue for > 1 month, so yes

sorry i missed those! appreciate the help!!

[sheetalkamat]

Can you please create a repo or share your code where the issue repros. That would help investigating. Thanks