reactjs - React Native - Redux Toolkit with Redux Persist can't load components

Question

Before changing from reducers to persistedReducer = persistReducer(persistConfig, reducers), my app works. It doesn't persist but things working normally.

Changing to persistedReducer breaks everything. The error is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Store setup code:

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
});
let persistor = persistStore(store);

It previously worked when: reducer: reducers

Component use code:

    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer linking={linking}>
          <View style={styles.container}>
            <View style={styles.content}>
              <Blank />
            </View>
          </View>
        </NavigationContainer>
      </PersistGate>
    </Provider>

So the error looks like it's not importing components properly. So I tested...

1. Blank component with just a View in another file imported in. Same error.
2. That same Blank component with code in the same file as main app. Works. So that agrees with it looking like it's not importing components properly. BUT it all worked before changing the reducers input to store, which should have nothing to do with importing components.

Blank component (works when in same file, doesn't work when exported and then imported with import { Blank } from './components/Blank'):

function Blank(props) {
  return (
    <View>
      <Text>Blank</Text>
    </View>
  );
}

I'm confused as to what's going on and how to fix. Please help? :)

Answer 1

Are you exporting Blank correctly?

// Blank.js

export default Blank

// App.js
import Blank from '../Blank