CODEWITHSUNDEEP
reactjsreact-nativeredux-toolkitimmer.js
Ashish Dommety
Ashish Dommety

Reputation: 172

Immer error when using redux/toolkit with React-Native (iOS)

I'm trying to use @redux/toolkit in my react-native app. However, when I run the iOS simulator I get the following error.

Metro has encountered an error: While trying to resolve module immer from file /path-node-modules/node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.production.min.js, the package /path-node-modules//node_modules/immer/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/path-node-modules/node_modules/immer/dist/immer.esm.mjs. Indeed, none of these files exist:

I found a similar issue on immer's github repo that was resolved in 2019, but I'm still seeing this today (which is weird because I have all the latest packages).

I edited the node-modules path, because it starts from my root directory.

Any ideas on how to resolve this?

Upvotes: 5

Views: 2645

Answers (4)

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10618

The answer that @ashish provided got me most of the way there but explicitly replacing the sourceExts broke something else in the way things work with expo.

So here's an alternative way to add mjs to the to the metro config that doesn't alter the existing defaultConfig:

const { getDefaultConfig } = require('expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push('mjs');

module.exports = defaultConfig;

Upvotes: 1

Morteza Mazrae
Morteza Mazrae

Reputation: 52

if you use yarn, put this in your package.json:

  "resolutions": {
    "@reduxjs/toolkit/**/immer": "9.0.12"
  },

and do yarn install --force.

Upvotes: 0

Ahmadreza TaleMasouleh
Ahmadreza TaleMasouleh

Reputation: 7

I just installed version of 9.0.12 for Immer and it fixed! I guess there is issue in version of 9.0.13.

Upvotes: 0

Ashish Dommety
Ashish Dommety

Reputation: 172

Seems like adding mjs to the metro config did the trick.

const { getDefaultConfig } = require("expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts = ['jsx', 'js', 'ts', 'tsx', 'mjs'];

module.exports = defaultConfig;

Upvotes: 3

Related Questions