如何在导入期间修复“ TypeError：未定义不是对象”

Question

I'm trying to organize my common theme folder in React Native. But found a problem when trying to default export a module in a different file. Basically, trying to do this basic structure:

+-- components
+-- theme
|  +-- appStyles.js
|  +-- colors.js
|  +-- index.js

In theme/appStyles.js would export default a single object (same for colors.js ):

export default {
  screen: {
    flex: 1,
  },
};

In theme/index.js looks like this where it'll export default an object, mapping the files in the theme folder:

import AppStyles from './appStyles';
import Colors from './colors';

export default {
  AppStyles,
  Colors,
};

When I'm trying to use this in another module, ie SomeComponent.js , it would just be undefined and would be unusable:

import { AppStyles } from '../theme';

console.log(AppStyles); // would log 'undefined'

---

As a work around, I've been doing:

In theme/appStyles.js :

export const AppStyles = {
  screen: {
    flex: 1,
  },
};

In theme/index.js :

export * from './appStyles';

It would then be usable in SomeComponent.js :

import { AppStyles } from '../theme';

console.log(AppStyles); // would log Object structure

---

Been using this 'pattern' in ReactJS Web. Just wondering how does React Native handle this module resolution.

Answer 1

No need to wrap default export by {}

import AppStyles from './appStyles';

export default AppStyles;

Than simply import with whatever name you want

import  AppStyles  from '../theme';

console.log(AppStyles);

I have multiple things to be exported from index

import  AppStyles  from '../theme';
import  Color from '../color';
export{
  Appstyle as default,
  Color
}

Than simply import as

import  AppStyles, {Color}  from '../theme';

console.log(AppStyles);
console.log(Color);