Type-graphql: tsc failing to compile the type-graphql because of "import type" from class-validator

[eyal-elkevity]

Hi, I'm having issues compiling my project using tsc. I was using babel up 'till now but had weird issues with the compiled code not calling @FieldResolver, and I realized most people use tsc so I switched, after updating to latest versions of all libs (type-graphql, typescript, etc). my tsc fails with type-graphql itself failing to compile the import from class-validator, which is the newish "import type" feature. any idea why?

node_modules/type-graphql/dist/decorators/types.d.ts:2:13 - error TS1005: '=' expected.

2 import type { ValidatorOptions } from "class-validator";
              ~

node_modules/type-graphql/dist/decorators/types.d.ts:2:39 - error TS1005: ';' expected.

2 import type { ValidatorOptions } from "class-validator";
                                        ~~~~~~~~~~~~~~~~~

node_modules/type-graphql/dist/errors/ArgumentValidationError.d.ts:1:13 - error TS1005: '=' expected.

1 import type { ValidationError } from "class-validator";
              ~

node_modules/type-graphql/dist/errors/ArgumentValidationError.d.ts:1:38 - error TS1005: ';' expected.

1 import type { ValidationError } from "class-validator";
                                       ~~~~~~~~~~~~~~~~~

node_modules/type-graphql/dist/metadata/definitions/param-metadata.d.ts:1:13 - error TS1005: '=' expected.

1 import type { ValidatorOptions } from "class-validator";
              ~

node_modules/type-graphql/dist/metadata/definitions/param-metadata.d.ts:1:39 - error TS1005: ';' expected.

1 import type { ValidatorOptions } from "class-validator";
                                        ~~~~~~~~~~~~~~~~~

node_modules/type-graphql/dist/schema/build-context.d.ts:2:13 - error TS1005: '=' expected.

2 import type { ValidatorOptions } from "class-validator";
              ~

node_modules/type-graphql/dist/schema/build-context.d.ts:2:39 - error TS1005: ';' expected.

2 import type { ValidatorOptions } from "class-validator";
                                        ~~~~~~~~~~~~~~~~~


Found 8 errors.

To Reproduce
here's my tsconfig:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "ESNext",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noStrictGenericChecks": true,
    "moduleResolution": "node",
    "strict": false,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "types": ["react", "jest", "node"],
    "jsx": "react",
    "lib": ["dom", "es2016", "esnext.asynciterable"],
    "declaration": false,
    "declarationDir": "./types",
    "emitDeclarationOnly": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "removeComments": false,
    "importHelpers": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": false,
    "composite": false,
    "isolatedModules": false,
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/*.test.ts"]
}

and package.json:

{
  "name": "gearu-server",
  "version": "1.0.0",
  "description": "",
  "main": "dist/server.js",
  "scripts": {
    "build": "rm -rf dist && npm run build-ts && npm run copy-assets",
    "build2": "rm -r dist && npm run build-ts && npm run copy-assets",
    "build-ts": "babel src -d dist --copy-files --extensions '.ts,.js,.jsx,.tsx'",
    "types": "tsc --jsx react",
    "postinstall": "npm run build-ts",
    "start-ts": "TS_NODE_FILES=true nodemon -w src --ext ts --exec ts-node src/server.ts",
    "start": "npm run serve",
    "heroku-local": "heroku local",
    "serve": "node dist/server.js",
    "build_and_serve": "npm run build && npm run serve",
    "watch-node": "nodemon dist/server.js",
    "watch-ts": "tsc -w",
    "lint": "tslint -c tslint.json 'src/**/*.ts'",
    "test": "jest src",
    "migration:create-initial": "ts-node ./node_modules/typeorm/cli.js migration:generate -n initial",
    "migration:run": "ts-node ./node_modules/typeorm/cli.js migration:run -t=false",
    "migration:revert": "ts-node ./node_modules/typeorm/cli.js migration:revert",
    "migration:create-and-run": "npm run build && npm run migration:create-initial && npm run build && npm run migration:run",
    "typeorm:cli": "ts-node ./node_modules/typeorm/cli -f ormconfig.json",
    "copy-assets": "copyfiles --error --verbose --up 1 src/**/*.svg dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/plugin-transform-modules-amd": "^7.10.5",
    "@types/async": "^3.2.3",
    "@types/aws-sdk": "^2.7.0",
    "@types/cookie-parser": "^1.4.2",
    "@types/cors": "^2.8.7",
    "@types/express": "^4.17.8",
    "@types/express-serve-static-core": "^4.17.12",
    "@types/express-session": "^1.17.0",
    "@types/flat": "^5.0.1",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^26.0.13",
    "@types/jsonwebtoken": "^8.5.0",
    "@types/lodash": "^4.14.161",
    "@types/method-override": "0.0.31",
    "@types/morgan": "^1.9.1",
    "@types/node": "^14.10.2",
    "@types/passport": "^1.0.4",
    "@types/passport-facebook": "^2.1.10",
    "@types/passport-facebook-token": "^0.4.34",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-select": "^3.0.19",
    "@types/styled-system": "^5.1.10",
    "@types/supertest": "^2.0.10",
    "copyfiles": "^2.3.0",
    "jest": "^26.4.2",
    "nodemon": "^2.0.4",
    "prettier": "^2.1.2",
    "supertest": "^4.0.2",
    "ts-jest": "^26.3.0",
    "ts-node": "^9.0.0",
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.3.0",
    "typescript": "^4.0.2"
  },
  "dependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/parser": "^7.11.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/plugin-transform-runtime": "^7.11.5",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@babel/register": "^7.11.5",
    "@types/express-jwt": "0.0.42",
    "admin-bro": "^3.2.5",
    "admin-bro-expressjs": "^2.1.1",
    "admin-bro-typeorm": "^0.1.6-alpha.9",
    "apollo-server": "^2.17.0",
    "apollo-server-express": "^2.17.0",
    "aws-sdk": "^2.753.0",
    "babel-plugin-const-enum": "^1.0.1",
    "babel-plugin-styled-components": "^1.11.1",
    "babel-plugin-transform-typescript-metadata": "^0.3.0",
    "canvas": "^2.6.1",
    "class-validator": "^0.12.2",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-formidable": "^1.2.0",
    "express-jwt": "^6.0.0",
    "express-session": "^1.17.1",
    "flat": "^5.0.2",
    "fs": "0.0.1-security",
    "graphql": "^15.3.0",
    "jsonwebtoken": "^8.5.1",
    "method-override": "^3.0.0",
    "morgan": "^1.10.0",
    "passport": "^0.4.1",
    "passport-facebook-token": "^4.0.0",
    "pg": "^8.3.3",
    "react": "^16.13.1",
    "reflect-metadata": "^0.1.13",
    "type-graphql": "^1.0.0",
    "typeorm": "^0.2.26"
  },
  "engines": {
    "node": "14.2.0"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

any help would be appreciated

[MichalLytek]

import type syntax was introduced in TypeScript 3.8:
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export

So if you are using correct tsc version, you need to create a bug in TypeScript repo or ask for help on stackoverflow about configuring babel to support that.

There's nothing to do on TypeGraphQL side 🔒

[eyal-elkevity]

hey - so if anyone else ever encountered this - I figured out my issue. I was calling tsc from the terminal which didn't use my node_modules typescript version (which was 4), but the one from the global node modules I guess, 3.7. when I called tsc --version everything became clear. so I created a build npm script which called tsc, and this time it worked with the new 4 ts version and all went well. thanks and I appreciate your time :)