baseUrl in tsconfig is not supported about react-native-template-typescript HOT 22 CLOSED

I've tried other solutions in this thread, in addition to trying to work around the issue with "@babel/register". It did not work.

What worked for me was to edit metro.config.js and use extraNodeModules.

Since I have this in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."

And I want to import from "[root]/src" as "src/...", here's my full metro.config.js configuration:

const path = require("path")

module.exports = {
  resolver: {
    extraNodeModules: {
      "src": path.resolve(__dirname, 'src'),
    }
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

If your module still isn't being found, try tweaking sourceExts.

from react-native-template-typescript.

The solution to this is to add babel-plugin-module-resolve and then mimic the baseUrl/paths setup in your Babel config to transform your import paths like TypeScript would.

@nkovacic for your configuration, your .babelrc should similar to this:

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./src"],
                "alias": {
                    "@assets/*": "assets/*"
                }
            }
        ]
    ]
}

from react-native-template-typescript.

This solution did not work for me. As far as I can tell, the babel.config.js file is not even being read in my environment; I put some gibberish at the bottom of the file, and the application still built and loaded (minus the fact this error came up).

I am on React Native 0.59.5 - I am not sure if that could explain the difference in behavior.

from react-native-template-typescript.

same question and I used solution of @solkaz, little different.

.babelrc

    [
      "module-resolver",
      {
        "alias": {
          "@kit": "./src/kit"
        }
      }
    ]

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@kit/*": ["src/kit/*"]
    }

from react-native-template-typescript.

For everyone for whom using babel-plugin-module-resolve didn't work and is using Expo:
Try running your project with expo start --clear to clear your Javascript transform cache, it worked for me.

from react-native-template-typescript.

The babel-plugin-module-resolver documentation shows how to use regular expressions to address this. So after some experimenting, this is a running example:

tsconfig.json

"baseUrl": ".",
    "paths": {
      "xyz": ["src/components/xyz/index"],
      "xyz/*": ["src/components/xyz/*"],
      "components/*": ["src/components/*"],
    }

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        alias: {
          "xyz": ["./src/components/xyz/"],
          "components/(.+)": "./src/components/\\1",
        }
      }
    ]
  ]
}

Adding a special path for index imports was the only way to make it work in my experience

Using it is straight forward:

import Something from 'xyz';
import { SomethingElse } from 'components/SomethingElse';

Took some trial and error but it's working fine now.

from react-native-template-typescript.

Probably this could help somebody. It helped me: https://www.reactnativeschool.com/how-to-setup-path-alias-in-a-react-native-typescript-app

from react-native-template-typescript.

Hi @nkovacic,

Thank you for creating an extended issue.

Sadly the .tsconfig can only be used for type checking and not for transpilation. That's because since React Native 0.57, TypeScript has been added as a preset for Babel 7 (https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/) and the TypeScript compiler is not being used anymore.

I have not yet found a solution for that issue and open for contributions.

from react-native-template-typescript.

Is there any other way to atleast set a base path, so that absolute paths can be used?
Because relative path imports like these are really a pain to mantain...
import { currentStepSelector } from '../../../../../modules/auth/reducer';

from react-native-template-typescript.

I never used absolute paths but I quickly checked and there seems to be a way: https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1

from react-native-template-typescript.

@solkaz tried your solution and there seems to be a collision between ./src folder and some react-native internals. Probably should work in other JavaScript projects.

from react-native-template-typescript.

@nkovacic what errors were you getting?

from react-native-template-typescript.

Also having this issue with setting baseUrl in the tsconfig. Any valid workarounds or solutions on this?

from react-native-template-typescript.

Even when changing the src main folder to app, paths still do not work. Can anyone share a complete example?

from react-native-template-typescript.

I'm seeing the same issue

from react-native-template-typescript.

Adding babel-plugin-module-resolve and updating babel.config.js with tsconfig.js works fine in my 0.60.5 app

from react-native-template-typescript.

I don't think this is related to this template if you would like to have this feature consider submitting a PR.

from react-native-template-typescript.

Neat solution @resolritter . That worked for me. Thanks!

from react-native-template-typescript.

Saved my life @apedroferreira

from react-native-template-typescript.

👍 to @apedroferreira

from react-native-template-typescript.

Thank u @resolritter , your solution really helped me )

from react-native-template-typescript.

Thanks @apedroferreira! It worked for me with the module-resolver solution and resetting the cache too, but for React Native CLI: npm start -- --reset-cache

from react-native-template-typescript.