How to Import Files from Outside of Root directory in React Native

#reactnative #metrobundler #reactnativeweb

Many projects do not use a specific tool to manage multiple packages from the same repository, and this is not necessarily a problem. However, one of the trickiest issues in medium to large react-native projects is importing files outside of the root directory with Metro Bundler.

In fact, even in the React Native official documentation, you will not find a solution for this.

Consider the following project structure:

root
node_modules
src
  -- components
  -- views
  -- theme
  -- …others
web
  -- node_modules
  -- index.js
  -- …others
native
  -- node_modules
  -- android
  -- ios
  -- index.js
  -- App.jsx
  -- metro.config.js
  -- babel.config.js
  -- …others

This project uses react-native-web, so the code can be developed once and then run on web, iOS, and Android.

Let’s say you have an Example component in src.

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

export const Example = () => {
 return (
   <View style={style.container}>
     <Text style={style.title}>Hello from Root: /src</Text>
   </View>
 );
};

const style = StyleSheet.create({
 container: {
   alignItems: 'center',
   backgroundColor: 'yellow',
   height: 200,
   justifyContent: 'center',
   width: 200,
 },
 title: {
   fontSize: 18,
 },
});

To import the Example component from src in your native App.js, you would do this:

import {Example} from '../src/components';

Or, you could use an alias called @components:

import {Example} from '@components';

However, the Metro Bundler would give you the following error:

BUNDLE  ./index.js 
error: Error: Unable to resolve module ../src/components from /…route_to_project_directory/rn-import-files-outside-root/native/App.js:

Solution

To solve this issue, you will need to modify the Metro configuration in your native/metro.config.js file:

const path = require('path');

module.exports = {
 transformer: {
   getTransformOptions: async () => ({
     transform: {
       experimentalImportSupport: false,
       inlineRequires: true,
     },
   }),
 },
 resolver: {
   sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
 },
 watchFolders: [
   path.resolve(__dirname, '../node_modules'),
   path.resolve(__dirname, '../src'),
   path.resolve(__dirname, '..'),
 ],
 projectRoot: path.resolve(__dirname),
};

Add the babel-plugin-module-resolver to your development dependencies. Navigate to your React Native project directory and run:

yarn add -D babel-plugin-module-resolver

Then, modify your native/babel.config.js file as follows:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['../src'],
        alias: {
          '@components': '../src/components',
          'react-native': './node_modules/react-native',
          react: './node_modules/react',
        },
      },
    ],
  ],
};