Typescript compilation issue

help
1

For some reason, using Module Resolution Options as described in the doc breaks Meteor startup.
Error: Cannot find module '/startup/client/cache Although the file does exist.
Here is my tsconfig file:

{
  "compilerOptions": {
      "target": "ES2018",
      "module": "ESNext",
      "lib": ["ESNext", "DOM"],
      "allowJs": true,
      "checkJs": false,
      "jsx": "react",
      "incremental": true,
      "sourceMap": true,
      "noEmit": true,

      /* Strict Type-Checking Options */
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "noImplicitThis": true,
      "strictBindCallApply": true,
      "strictPropertyInitialization": true,
      "strictFunctionTypes":true,

      /* Module Resolution Options */
      "baseUrl": ".",
      "paths": {
          "/*": ["*"],/* Support absolute /import/ with a leasing '/' */
          "api/*":["./api/*"],
          "client/*":["./client/*"],
          "intl/*":["./intl/*"],
          "module/*":["./module/*"],
          "startup/*":["./startup/*"],
          "public/*":["./public/*"],
          "private/*":["./private/*"],
          "ui/*":["./ui/*"],
      },
      "resolveJsonModule": true,
      "preserveSymlinks": true,
      "experimentalDecorators": true,
      "moduleResolution": "Node",
      "esModuleInterop": true,

      "types": [
          "@types/node",
          // "mocha",
          "@types/csvtojson",
          "@types/faker",
          "@types/json2csv",
          "@types/meteor",
          "@types/meteor-roles",
          "@types/pdfmake",
          "@types/react-big-calendar",
          "@types/react-csv",
          "@types/react-helmet",
          "@types/simpl-schema",
          "@types/react-dom",
          "@types/react-router-dom",
          "@types/react-color",
          "@types/graphql-type-json",
          "@types/classnames",
      ],
      /* Checks */
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": false,
      "noFallthroughCasesInSwitch": false,

      "allowSyntheticDefaultImports": true,
  },
  "exclude": ["./node_modules/**", "./.meteor/**"]
}

Actually, meteor is not resolving “/": ["”]. Maybe there is something wrong with my tsconfig file.
My original intent was to set-up module resolution like this:

"paths": {
   "@/*": ["*"],/* Support absolute /import/ with a leasing '/' */
   "@api/*":["./api/*"],
   "@client/*":["./client/*"],
   "@intl/*":["./intl/*"],
   "@module/*":["./module/*"],
   "@startup/*":["./startup/*"],
   "@public/*":["./public/*"],
   "@private/*":["./private/*"],
   "@ui/*":["./ui/*"],
},

The same error does happen. When starting meteor, all file imported with @/or @api trows the abode error.
Any help would be welcome.

2

You should configure babelrc with babel-plugin-module-resolver plugin to support aliases in build process.

So, there are two places where you should define any alias: tsconfig.json(for IDE) and .babelrc(for build process)

An example of .babelrc:

{
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@awesomealias/alerts": "./imports/lib/client/alerts",
          "@awesomealias/core": "./imports/core",
          "@awesomealias/lib": "./imports/lib",
          ...
        }
      }
    ]
  ]
}

tsconfig.json (only for IDE):

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["esnext", "dom"],
    "allowJs": true,
    "checkJs": false,
    "noEmit": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": false,
    "noFallthroughCasesInSwitch": false,
    "moduleResolution": "node",
    "types": ["node", "jquery", "mocha"],
    "esModuleInterop": true,
    "preserveSymlinks": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "importHelpers": true,
    "baseUrl": ".",
    "paths": {
      "@awesomealias/alerts": ["imports/lib/client/alerts"],
      "@awesomealias/core": ["imports/core"],
      "@awesomealias/lib": ["imports/lib"],
      "@awesomealias/lib/*": ["imports/lib/*"],
      ...
    }
}

Meteor’s typescript currently doesn’t use tsconfig from project. See source code for more details: https://github.com/meteor/babel/blob/master/index.js#L147-L163

3

I recommend using the refapp:meteor-typescript package if you want control over configuration as well as diagnostics during the build process.

Disclosure: I authored it

4

Thanks for the help. Now i get Error: Cannot find module '../../../

[
      "module-resolver",
      {
        "alias": {
          "@": "./",
        },
        "extensions": [".js", ".ts", ".d.ts", ".json", ".node", ".gql", ".jsx", ".tsx", ".es", ".es6"]
      }
    ]