CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxredux-toolkit
waelvilla
waelvilla

Reputation: 21

running React Native app with Redux toolkit throws an error

When i try to the run app it shows a red screen with this error in the terminal

Error: Unable to resolve module `../../../../src/assets/images` from `node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.production.min.js`:

but It occuurs on iOS as well

The only way to make it go so far has been uninstalling react-redux. I do not have any imports in my code that point to src/assets/images as I dont have an assets/images directory to begin with.

My index.js:

import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';

import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';

const reduxApp = () => (
<ReduxProvider store={store}>
    <App />
</ReduxProvider>
)
AppRegistry.registerComponent('main', () => reduxApp);

Redux store:

import { configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
import logger from 'redux-logger';
import { persistStore } from 'redux-persist';
import reducer from './reducers'


const middleware = [...getDefaultMiddleware(), logger]

const store = configureStore({
  reducer,
  middleware,
})

export const persistor = persistStore(store);

export default store;

metro.config.js:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            src: './src',
            screens: './src/screens',
            redux: './src/assets/images',
            assets: './assets',
          },
        },
      ],
    ],
  };
};

screenshot of Android error screen

Upvotes: 1

Views: 808

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42278

The problem is your babel.config.js file. I'm guessing that you copy and pasted some code from somewhere else without understanding what it means.

redux: './src/assets/images',

This line right here tells the compiler that the location of the redux module is ./src/assets/images. It will look for the redux source code in that folder, which doesn't exist, instead of the default location which is ./node_modules/redux.

You don't want this so delete that line.

Upvotes: 1

Related Questions