React-native: Cache / Babel issue on building

[DannyiCracked]

https://www.npmjs.com/package/easy-import and my .babelrc file looks as follows:

{
    "presets": ["react-native"],
    "plugins": [
        "easy-import"
    ]
}

I use the above package in my projects (think of it as a lighter-weight facebook/node-haste.)

After running the following command:

npm run start -- --reset-cache & react-native run-ios my build starts as expected, and things work normally.

When I create a component such as the following:

// @provides Component
import React from 'react';
export default class Component extends React.Component {
}

and try to include it elsewhere in my code:

import Component from 'Component`

I get the following common error:

Unable to resolve module

I clear all the caches, follow the instructions and then randomly and occasionally things work. This is to say that I do have components working with the easy-import module, they just sometimes get ignored / can't invalidate a cache that searches the dependency map.

How can we ensure that the babel plugins are being run on every save / live reload? I actually haven't found a working solution to force a full compile every time yet.

[DannyiCracked]

Update:

[2:04:41 PM] <END>   Crawling File System (378ms)
[2:04:41 PM] <START> Building in-memory fs for JavaScript
[2:04:41 PM] <END>   Building in-memory fs for JavaScript (154ms)
[2:04:41 PM] <START> Building in-memory fs for Assets
[2:04:42 PM] <END>   Building in-memory fs for Assets (116ms)
[2:04:42 PM] <START> Building Haste Map
[2:04:42 PM] <START> Building (deprecated) Asset Map
[2:04:42 PM] <END>   Building (deprecated) Asset Map (48ms)
[2:04:42 PM] <END>   Building Haste Map (347ms)
[2:04:42 PM] <END>   Building Dependency Graph (1001ms)
[2:04:56 PM] <START> request:/index.ios.bundle?platform=ios&dev=true
[2:04:56 PM] <START> find dependencies
transformed 733/733 (100%)
[2:05:08 PM] <END>   find dependencies (11661ms)

Basically every time I add a new component I have to run npm start -- --reset-cache which as you can see above takes around 12 seconds. I'd like to avoid the cache and have my dependency map re-created on the fly (through the babel plugin.) Is there a way to do that?

[grabbou]

If you really need similar behaviour, you can use built-in @providesModule that's used internally, though I wouldn't recommend it as there are plans to move to standard node-like requires.

Here's also a short article I wrote in the past showing possible solutions for avoiding relative paths in require calls here

[mkonicek]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @mkonicek says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[DannyiCracked]

I don't think this issue can be closed as answered. Not being able to use npm modules properly in your build cycle is a huge problem. Just because there are alternatives, doesn't mean it isn't an issue.

@mkonicek @grabbou

[mmazzarolo]

I used at least 3 babel plugins in the past that had the same problem with react-native, the last one is babel-plugin-module-resolver.
Does anyone know if this caching issue can be fixed?