Babel-plugin-module-resolver: Relative paths not working with Expo.

Created on 3 May 2017 · 15Comments · Source: tleunen/babel-plugin-module-resolver

I found that Expo is already using babel-plugin-module-resolver... 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

How can I adjust babel-plugin-module-resolver and Expo to work together?

Source

eduardoleal

🎉2

Most helpful comment

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

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "root": ["./app"],
      "alias": {
        "@components": "./app/components",
        "@config": "./app/config",
        "@helpers": "./app/helpers",
        "@navigators": "./app/navigators",
        "@reducers": "./app/reducers",
        "@screens": "./app/screens",
      }
    }]
  ]
}

Seemingly after removing the "module-resolver" from env -> development resolved the problem.

eduardoleal on 4 May 2017

👍7

All 15 comments

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

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "root": ["./app"],
      "alias": {
        "@components": "./app/components",
        "@config": "./app/config",
        "@helpers": "./app/helpers",
        "@navigators": "./app/navigators",
        "@reducers": "./app/reducers",
        "@screens": "./app/screens",
      }
    }]
  ]
}

Seemingly after removing the "module-resolver" from env -> development resolved the problem.

eduardoleal on 4 May 2017

👍7

I just hope it will al be even easier with the .babelrc.js file :)

Glad you made it work :)

fatfisz on 4 May 2017

After a while the problem started again. I'm getting the same error.
It seems that babel-plugin-module-resolver/ is getting lost with the paths.
I tried to set cwd options, but it still doesn't work.
My current .babelrc is:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "src": [
        "./node_modules"
      ],
      "alias": {
        "$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",
        "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",
      },
       "cwd": "packagejson",
    }]
  ]
}

Any help?

eduardoleal on 4 May 2017

Could you please make a small repo and link to it here? It's very hard to debug based on the .babelrc only.

fatfisz on 4 May 2017

Here's the link: https://github.com/eduardoleal/module-resolver-test

Thanks, for your help!!!

eduardoleal on 4 May 2017

Thanks! I'll try to work on this today or otherwise give a heads up.

On the first look it seems that the versions of babel-plugin-module-resolver used are 2.5.0 and 2.7.0. Will try to use the 3.beta version and see if the situation improves.

Just one more question: what is your OS? I'm working on Windows 10, could probably test on Ubuntu 16 too, but not on OS X.

fatfisz on 5 May 2017

I'm using OS X 10.12.4.
I'll also test on Linux!

eduardoleal on 5 May 2017

Ok, I managed to set the project up and have the same error. Will continue debugging tomorrow!

fatfisz on 6 May 2017

Here's what I found out is happening:

The file './node_modules/@expo/vector-icons/Entypo.js` has an import:
import glyphMap from 'react-native-vector-icons/glyphmaps/Entypo.json';
The import gets processed using a config from babel-preset-expo:
'react-native-vector-icons': '@expo/vector-icons',
And so it is turned into @expo/vector-icons/glyphmaps/Entypo.json according to the rule.
The bundler cannot find the path @expo/vector-icons/glyphmaps/Entypo.json, hence the error.

This looks like a correct behavior to me, not a problem with the module-resolver plugin. I think the problem lies in the config of babel-preset-expo; there are circular aliases there, which means that the output may be different depending on the number of times the plugin was applied.

In fact, after removing the 'react-native-vector-icons': '@expo/vector-icons' line from babel-preset-expo, the bundle managed to be completed.

@eduardoleal I suggest you raise this issue in the appropriate expo repo. I'd be happy to help expo maintainers with preparing a good configuration, but first I'd need to now the intent behind the current one, which I don't.

Thanks a lot for preparing the repo, it helped a great deal with debugging :)

fatfisz on 6 May 2017

@eduardoleal If you want a quick fix, copy the config of babel-preset-expo into yours (while removing it from the presets) and drop the 'react-native-vector-icons': '@expo/vector-icons' alias.

fatfisz on 6 May 2017

👍1

I did copy the config of babel-preset-expo into my .babelrc and it's working now!

Here's my current config:

{
  "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 will report this at babel-preset-expo repo with a link to this issue! I really appreciate your help! Thanks for your time @fatfisz!

eduardoleal on 6 May 2017

Hi there! Here's the justification for the config there:

'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',

First, we want to alias react-native-vector-icons to @expo/vector-icons because third party libraries that depend on react-native-vector-icons directly need this in order to delegate to the Expo version.

@expo/vector-icons itself depends on react-native-vector-icons though, so we need to rewrite those requires back to react-native-vector-icons. If this is causing the problem, I could just vendor react-native-vector-icons. It seems like I might be wrong in assuming that I can do this -- it worked in the past, and continues to work if you just use the preset as-is, but if you add another instance of babel-plugin-module-resolver it seems to change the order that the aliases are applied.

brentvatne on 10 May 2017

Edit: fixed after mucking around enough with the settings in this thread. (Had to get exponent to actually reload the code.)

@brentvatne Any idea if this might conflict with Relay? I'm using @dev babel plugin build, and have been working on this a couple hours, unable to get past the error Unable to resolve module '@expo/vector-icons/glyphmaps/Entypo.json'

.babelrc:
{
  "passPerPreset": true,
  "plugins": [
    [
      "relay", {
        "compat": true,
        "schema": "./schema.graphql",
        "enforceSchema": true,
        "suppressWarnings": false,
        "debug": true
      }
    ]
  ],
  "presets": [
    "babel-preset-expo"
  ]
}

lukewlms on 10 May 2017

If it's possible to build @expo/vector-icons separately with this part

'@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',

being applied there, then I'd definitely recommend this. Then it would be ok to keep only

'react-native-vector-icons': '@expo/vector-icons',

Another way to go around this would be to use absolute paths

'react-native-vector-icons': require.resolve('@expo/vector-icons'),
'@expo/vector-icons/lib/create-icon-set': require.resolve('react-native-vector-icons/lib/create-icon-set'),
'@expo/vector-icons/lib/icon-button': require.resolve('react-native-vector-icons/lib/icon-button'),
'@expo/vector-icons/lib/create-icon-set-from-fontello': require.resolve('react-native-vector-icons/lib/create-icon-set-from-fontello'),
'@expo/vector-icons/lib/create-icon-set-from-icomoon': require.resolve('react-native-vector-icons/lib/create-icon-set-from-icomoon'),
'@expo/vector-icons/lib/icon-button': require.resolve('react-native-vector-icons/lib/icon-button'),
'@expo/vector-icons/glyphmaps': require.resolve('react-native-vector-icons/glyphmaps'),

The problem is when the config is constructed in such a way that when applied two or more times to the same may yield different results. Sometimes this may unexpectedly happen because of the reasons outside of the control of the tool and hence the strange errors.

I think that in the future there will be a warning for this, it seems like a common cause of unexpected problems with the plugin.

fatfisz on 10 May 2017

👍1

@eduardoleal @brentvatne My _.babelrc_ looks like the following and I'm not having any issues with vector-icons. Is this strange considering I have not included the "@expo/vector-icons/*": "react-native-vector-icons/*" aliases?

{
  "presets": ["react-native"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "react-native-vector-icons": "@expo/vector-icons"
        }
      }
    ],
    "transform-decorators-legacy",
    "transform-exponentiation-operator",
    "transform-export-extensions"
  ]
}

It's essentially babel-preset-expo but I'm using [email protected].