Search code examples
exporedux-toolkitmetro-bundlerimmer.jsexpo-go

Metro Bundler fails while trying to resolve module `immer` from redux-toolkit


I'm building a react native app using Expo and Expo Go to test it on an android device. It has been working flawlessly until today. I encoutered an error on one of my components with this kind of error:

Attempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)' on a null object reference

Solution seemed to me to clear cache yarn cache clean. I also cleared cache on the Expo Go app. But this led me to Metro Bundler failing with this error:

Android Bundling failed 1279ms
While trying to resolve module `immer` from file `H:\my_project\app\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js`, the package `H:\my_project\app\node_modules\immer\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`H:\my_project\app\node_modules\immer\dist\immer.esm.mjs`. Indeed, none of these files exist:

  * H:\my_project\app\node_modules\immer\dist\immer.esm.mjs(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * H:\my_project\app\node_modules\immer\dist\immer.esm.mjs\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

When checking H:\my_project\app\node_modules\immer\dist\, I do find an immer.esm.mjs file but no H:\my_project\app\node_modules\immer\dist\immer.esm.mjs\ folder with an index file in it.

So I tried to manually remove node_modules/ and reinstall packages with yarn, restart the Expo server, doing all this after restarting my machine, even ran expo upgrade, removed .expo/, removed yarn.lock, but I keep getting the same error.

This leaves me quite confused. Thank you for your suggestions on what to do.


Here are the dependencies versions used as in my package.json:

"@reduxjs/toolkit": "^1.8.1",
"@types/react-redux": "^7.1.22",
"expo": "~45.0.0",
"react": "17.0.2",
"react-native": "0.68.2",
"react-redux": "8.0.1",
"redux": "4.2.0"

Solution

  • Fix

    As suggested in this redux-toolkit issue, there seems to be an issue with immer version 9.0.13. Temporary fix suggested there is working for me, adding [email protected] to my resolutions in packages.json:

      "resolutions": {
        "immer": "9.0.12"
      }
    

    Update

    This PR on immer resolved this issue (9.0.14). I can confirm the above fix isn't needed anymore on my side. Looks like my bad luck came from some breaking changes being pushed on a minor release.