CODEWITHSUNDEEP
typescriptreact-native
Élodie Petit
Élodie Petit

Reputation: 5914

Can not import TypeScript components with Babel custom aliases

I am using babel-plugin-module-resolver to import project files easily with using custom aliases. Everything seems fine on the TypeScript side. Below is the tsconfig.json:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es6"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,

    /* Strict Type-Checking Options */
    "strict": true,
    "noImplicitAny": false,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    /* Experimental Options */
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

I have a components folder in the root folder of the project and inside the folder I have 2 files.

index.tsx:

export {default as TestComponent } from './Test';

Test.tsx:

import React from 'react';
import {View, Text} from 'react-native';

export default () => {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  );
};

I am simply re-exporting the Test component from inside Test.tsx and using it in App.tsx like below:

import React from 'react';
import {StyleSheet} from 'react-native';

import {TestComponent} from 'components';

const App = () => {
  return <>
    <TestComponent />
  </>;
};

const styles = StyleSheet.create({});

export default App;

I get no warnings and no errors from the TypeScript compiler but when I run the app, I get:

Error: Unable to resolve module 'components' from 'App.tsx': components could not be found in the project.

So it seems something with the babel configuration which is like this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          "components": "./components"
        },
      },
    ],
  ],
};

The funny thing is, if I import the Test component from /components/Test, skipping the re-exporting inside the index.tsx everything works like a charm:

import React from 'react';
import {StyleSheet} from 'react-native';

import TestComponent from 'components/Test';

const App = () => {
  return <>
    <TestComponent />
  </>;
};

const styles = StyleSheet.create({});

export default App;

So I really can't find out what's wrong here. Any ideas?

I am using React Native 0.61.3 and all the packages are at their latest versions.

EDIT: Also I just found out that babel.config.js is really ignored. Created an invalid configuration and it continued to work.

Upvotes: 0

Views: 713

Answers (1)

aaronofleonard
aaronofleonard

Reputation: 2576

Incase you or anyone else is still having this problem, it does seem like babel.config.js is being ignored. But actually it's just being cached. What worked for me is doing the command npm start --reset-cache. At that point, it accepted the custom resolver for me. This was a pain.

Upvotes: 1

Related Questions