Requiring Modules in react-native

Question

I'm stuck on a problem in a react-native project. I'm trying to do a general require file, where I export all my modules. After that I would like to require only my "require.js" file to avoid calls like this require('../../ModuleName') in every file.

I have 4 files:

index.ios.js
/app/home.js
/app/MyView.js
/app/require.js

require.js:

module.exports = {

    Home: require('./home'),
    MyView: require('./MyView')

}

in index.ios.js (he modules Home and MyView are getting importet correctly)

'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var {
    Home,
    MyView
} = require('./app/require');

class Test_require extends React.Component {

    render() {

        return(
            <Home />
        );
    }

}



AppRegistry.registerComponent('Test_require', () => Test_require);

Home.js (the module MyView is not getting importet)

'use strict';

var React = require('react-native');

var {
    View,
    Text
} = React;

var {
    MyView
} = require('./require');

class Home extends React.Component {

    render() {
        console.log(MyView);
        return(
            <MyView />
        );
    }

}

module.exports = Home;

In the Home.js the MyView variable is "undefined". If I want to require a module in a Module, that gets already imported in another file, the variable is undefined.

Do you guys have any clue why I can do this or is there a better solution for my problem? Thanks for any clue

score 5 · Accepted Answer · answered Jan 07 '16 at 13:29

5

So I'm posting my own answer in case someone else has the same problem.

In a syntax like this the required files are getting loaded synchronously. So if the component's build is faster than requiring files, this problem happens. Either make your components load lazy when you need them or use es6 import syntax like this (import loads asynchronously):

import React from 'react-native'

cheers!

answered Jan 07 '16 at 13:29

vanBrunneren

797
2
10
29

So you mean `require` is synchronous and `import` is asynchronous? Isn't it the only ES syntax difference? – Shaharyar Aug 21 '16 at 10:52
It's not the only difference but in my case this was the solution / reason to my problem. Maybe this link gives more clarity on the topic http://www.researchhubs.com/post/computing/javascript/nodejs-require-vs-es6-import-export.html – vanBrunneren Sep 12 '16 at 08:53
I saw the link in my comment is broken, so if someone is looking for a solution have a look at http://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export – vanBrunneren Oct 19 '16 at 08:03

score 2 · Answer 2 · edited Jun 22 '17 at 22:57

2

Add @providesModule moduleName in your file header comment. And you can import using require('moduleName') other place in your project.
See this issue.
BTW, how come that such a amazing feature never documented anywhere ?

edited Jun 22 '17 at 22:57

Nicks

16,030
8
58
65

answered May 27 '16 at 04:03

Nick Allen

1,647
14
20

ChiralMichael · Answer 3 · 2020-01-15T20:36:38.047

1

This is way old, but the record needs to be corrected. Require isn't async. You can tell this easily by inspecting the object returned (not a promise).

Re-exporting in ES6 is simple.

For example:

export * from './types';
export { default as ApiClient } from './ApiClient';

edited Jan 15 '20 at 20:36

answered Jan 15 '20 at 20:30

ChiralMichael

1,214
9
20

Requiring Modules in react-native

3 Answers3

Linked