Typescript babel-plugin-module-resolver

Question

Hello is there an equivalent of babel-plugin-module-resolver for typescript. I am trying to resolve "react-native" to "react-native-web". Example below.

import { View } from "react-native" 
// should resolve to to once compiled or run using ts-node or ts-loader
import { view } from "react-native-web"

I have tried solving the issue for a while before asking the question with no success. Here's what I've tried.

first attempt: - unsuccessful

// tsconfig.json
"baseUrl": "./" 
"paths": {
  "react-native": ["node_modules/react-native-web"]
},
"skipLibCheck": true

second attempt: using Babel as a translator: successful but not ideal or elegant. Issues when using vscode debug due to an issue when pass .tsx, .ts extensions to the babel-node even with the --extensions ".ts,tsx" flag.

// .babelrc
{
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ],
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

does anyone have any ideas? Any help would be much appreciated.

Answer 1

You could try this: https://www.npmjs.com/package/tsconfig-paths

Typescript by default mimics the Node.js runtime resolution strategy of modules. But it also allows the use of path mapping which allows arbitrary module paths (that doesn't start with "/" or ".") to be specified and mapped to physical paths in the filesystem. The typescript compiler can resolve these paths from tsconfig so it will compile OK. But if you then try to execute the compiled files with node (or ts-node), it will only look in the node_modules folders all the way up to the root of the filesystem and thus will not find the modules specified by paths in tsconfig.