React Native Loading Module error when using typescript path mapping

Question

I'm trying to use typescript path mapping to improve my imports.

Currently I have the following source structure

tsconfig.json
src
..index.ts
..moduleA
....index.ts

So, inside my tsconfig.json I have

"baseUrl": ".",
"paths": {
     "moduleA": ["./src/moduleA/index.ts"]
},

and on src\index.js I call

import { MyClassFromModule} from 'moduleA';

Everything compile wells but when React Native tries to load the module I got the following error:

error: bundling: UnableToResolveError: Unable to resolve module `mymodule` from `C:\Git\phoenix\modules-poc\native\build\index.android.js`: Module does not exist in the module map or in these directories: C:\Git\phoenix\modules-poc\native\node_modules

So the things is that the module is not inside node_modules but its inside the source folder. How can I tell React Native to load the module from src folder?

Thanks

Dmitrii Dushkin · Accepted Answer · 2018-05-23 17:01:37Z

2

react-native-typescript-transformer just converts ts to js. All imports are still processed with metro bundler on compilation stage to one bundle file, so you need to configure it too. Try babel plugin module resolver with such .babelrc

{
 "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "extensions": [".js", ".ts", ".tsx", ".ios.js", ".android.js"]
    }]
  ]
}

The modern alternative to react-native-typescript-transformer is babel 7's typescript preset. You can use it if have no flowtypes in a project. Check this stub project https://github.com/Microsoft/TypeScript-Babel-Starter Still you should configure .babelrc, but now it's more obvious.

answered May 23, 2018 at 17:01

Dmitrii Dushkin

3,2904 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native Loading Module error when using typescript path mapping

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related