Babel module resolver doesn't work as expected (node + typescript)

Question

In my node project, I use babel-plugin-module-resolver to have relative paths.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build",
    "target": "es5",                          
    "module": "commonjs",                     
    "strict": true,     
    "noEmit": true,                    
    "esModuleInterop": true,                 
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true,  
    "baseUrl": "./src",
    "paths": {
      "constants/*": ["constants/*"],
      "data/*": ["data/*"],
      "database/*": ["database/*"],
      "enums/*": ["enums/*"],
      "features/*": ["features/*"],
      "@library/*": ["library/*"],
    }
  }
}

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "rules": {
    "semi": ["warn", "always"],
    "quotes": ["warn", "single"],
    "max-len": ["warn", 150],
    "no-console": 1,
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-inferrable-types": [
      "warn", {
        "ignoreParameters": true
      }
    ]
  }
}

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-env"
  ],
  "plugins": [ 
    [
      "module-resolver",
      {
        "alias": {
          "config": "./src/config",
          "constants": "./src/constants",
          "data": "./src/data",
          "enums": "./src/enums",
          "features": "./src/features",
          "library": "./src/library",
          "middleware": "./src/middleware",
          "utils": "./src/utils"
        }
      }
    ] 
  ]
}

when I import files, it doesn't display any errors. Can move to the specific file by clicking on the import path. But when it complies, it give the following error.

how to fix this issue??

Your tsconfig "paths" and babel config "alias" fields don't seem to match. What happens if you edit your entry in `.babelrc` for the library folder to add the `@`? `"@library": "./src/library",` Is it only imports from `@library` that have an issue, or are there other problematic imports as well? — jered, Mar 23 '21 at 01:11
See https://github.com/TypeStrong/ts-node/issues/138 for a lengthy discussion about `ts-node` and `paths` — Pasi, Mar 24 '21 at 17:19

score 0 · Answer 1 · answered Mar 25 '21 at 05:59

Looks like your TS config file's paths and Babel config file's alias fields don't match. Try prefixing @ on your problematic imports, as what @jered pointed out in the question comments.

You may also see https://github.com/TypeStrong/ts-node/issues/138 for the long discussion regarding ts-node and paths, as per @pasi said.

Babel module resolver doesn't work as expected (node + typescript)

1 Answers1