3

I'm trying to export initial component, but all the time I'm getting Invariant Violation error:

Is there any better way to export my HMAPP component and import it inside App.js?

Error image: Error screen

Here is my App.js:

import HMAPP from './app/HMAPP';

export default HMAPP;

Here is my HMAPP component: 

 import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { Navigation } from 'react-native-navigation';
import Mapbox from '@mapbox/react-native-mapbox-gl';

import { registerScreens } from './screens';
import store from './store/configureStore';
import { appInit, getInitialScreen } from './appInit';
import { handleErrorObject } from './lib/handleError';

Mapbox.setAccessToken('pkaeda324234');

const persistor = persistStore(
    store,
    null,
    () => {
        registerScreens(store, Provider);

        appInit(store)
            .then(() => {
                const initialScreen = getInitialScreen(store.getState());

                Navigation.startSingleScreenApp({
                    screen: {
                        screen: initialScreen,
                    },
                    passProps: {
                        persistor,
                    },
                    drawer: {
                        left: {
                            screen: 'DrawerMenuScreen',
                        },
                    },
                    appStyle: {
                        orientation: 'portrait',
                    },
                });
            })
            .catch((error) => {
                handleErrorObject('Error initializing app', error);
            });
    },
);
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
SAdnan
  • 57
  • 1
  • 1
  • 12
  • Do you export anything from `./app/HMAPP`? – devserkan Sep 12 '18 at 22:06
  • No, it's just for persist store and initial navigation – SAdnan Sep 12 '18 at 22:09
  • Without an export how do you try to import anything? – devserkan Sep 12 '18 at 22:11
  • I'm trying to find bug that someone else made. How can I export it when it's not component, it's just const. You can check code and give solution if you have – SAdnan Sep 12 '18 at 22:16
  • You can export a variable ( `const` or others) and import it again. This is regular Javascript. It depends how you use this variable. In the error, it clearly says this is an export problem. I don't know how do you plan to use this but React waits a proper export/import where do you use it. – devserkan Sep 12 '18 at 22:22

2 Answers2

6

According to the docs of export and import, to externalize something inside one .js file, you need to use export. Once your module is exported, you can import him and use anywhere you want inside another .js files, for example.

So, in your HMAP.js file you'll need to export your const like this: 

const persistor = persistStore( ... )
export default persistor;

and if you want to export more than one, you can export an object like this:

const persistor = persistStore( ... )
const persistor2 = persistStore2( ... )
export { persistor, persistor2 };

With your content exported, you can import it now on your App.js file:

import persistor from './app/HMAPP'; // use it when you exported with "default"

or

import { persistor1, persistor2 } from './app/HMAPP';

you could also import everything inside that file:

import * as persistors from './app/HMAPP';

Hope it helps someway.

Matheus Reis
  • 116
  • 4
0

In React Native, If you want to use your child component in other parent component then you have export that child component and import child component in parent component. Else, you declare your component with only class name, but in this way you can not use that component in any where. Ex:

 class Test extends React.Component {
}
Yoel
  • 7,555
  • 6
  • 27
  • 59
kundan
  • 1
  • 1