Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use import with absolute paths with Expo and React Native?

I'm trying to use absolute import paths instead of relative paths with Expo and React Native.

I looked on the expo docs and couldn't find an answer... Searching for the subject in react community I found babel-plugin-module-resolver but it seems that Expo is already using it so I've changed my .babelrc to create some aliases:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source",
        ["module-resolver", {
          "root": ["./app"],
          "alias": {
            "Components": "./app/components",
          }
        }]
      ]
    }
  }
}

But I got the following error:

    Unable to resolve module '@expo/vector-icons/glyphmaps/Entypo.json' 
    from '/Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/Entypo.js': 
    Module does not exist in the module map or in these directories:   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/node_modules/@expo/vector-icons/glyphmaps ,   /Users/eduardoleal/Code/lua/rook/node_modules/@expo/vector-icons/glyphmaps  This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:   
    1. Clear watchman watches: 'watchman watch-del-all'.   
    2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.   
    3. Reset packager cache: 'rm -fr $TMPDIR/react-*' or 'npm start --reset-cache'.
    ABI16_0_0RCTFatal -[ABI16_0_0RCTBatchedBridge stopLoadingWithError:] __34-[ABI16_0_0RCTBatchedBridge start]_block_invoke_2 _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0 

Is there any easy way to import absolute paths?

like image 726
Eduardo Leal Avatar asked Apr 28 '17 13:04

Eduardo Leal


People also ask

What is Babel preset Expo?

This preset extends the default React Native preset ( metro-react-native-babel-preset ) and adds support for decorators, tree-shaking web packages, and loading font icons with optional native dependencies if they're installed.

How do you use absolute path in TypeScript?

To be able to use absolute paths in TypeScript we can set the baseUrl property in the tsconfig. json file. With this, we define src as our root directory (for module resolution).


3 Answers

Update: Expo v32.0.0 and up

Expo init is creating a babel.config.js for you. Just add the plugins key to your babel.config.js file and add your alias. The env key is not needed anymore.

module.exports = function(api) {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            assets: './assets',
            components: './src/components',
            modules: './src/modules',
            lib: './src/lib',
            types: './src/types',
            constants: './src/constants',
          },
        },
      ],
    ],
  }
}

Update: Changes for Expo.io SDK v20.0.0

Since SDK v20.0.0 you can use the normal Babel Expo presets

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}

Expo.io SDK v19.0.0 and before

Without the root-element, separating plugins and changing presets to babel-preset-react-native-stage-0/decorator-support, an alias work for me.

Using Expo.io on Version 16.0.0
Found this in the Expo Forums here: https://forums.expo.io/t/relative-paths-with-expo/654/3

Can you verify that this works on your case too?

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "alias-name": "./app",
      }
    }]
  ]
}
like image 108
Laszlo Schürg Avatar answered Oct 20 '22 10:10

Laszlo Schürg


For latest expo users(sdk version >= 32).

Just add plugins property in your babel.config.js (find this file in project root directory).

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'alias-name': './src/assets/bla/bla',
          },
        },
      ],
    ],
  };
};
like image 4
Bimal Grg Avatar answered Oct 20 '22 10:10

Bimal Grg


After a while trying to get this working. I could resolve the problem with de following .babelrc:

{
  "presets": ["babel-preset-react-native-stage-0/decorator-support"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "react-native-vector-icons": "@expo/vector-icons",
        "@expo/vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
        "@expo/vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
        "@expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
        "@expo/vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps",
        "$components": "./app/components",
        "$config": "./app/config",
        "$helpers": "./app/helpers",
        "$navigators": "./app/navigators",
        "$reducers": "./app/reducers",
        "$screens": "./app/screens",
        "$images": "./assets/images",
        "$fonts": "./assets/fonts",
        "$icons": "./assets/icons",
        "$videos": "./assets/videos",
      }
    }]
  ]
}

I copied the content of babel-preset-expo to my .babelrc. It's not the best solution... but it works normally.

More details about it here

like image 2
Eduardo Leal Avatar answered Oct 20 '22 11:10

Eduardo Leal