Repack app fails with "could not find react-redux context value" for the latest versions of react-redux and @reduxjs/toolkit about repack

[jbroma]

Hey @RafaelA977

I managed to get it to work by doing the following in the webpack.config:

1. In resolve field, add the following entires:

resolve: {
   ...
   alias: {
        reselect: path.resolve(
          './node_modules/reselect/dist/reselect.legacy-esm.js',
        ),
        redux: path.resolve('./node_modules/redux/dist/redux.legacy-esm.js'),
        'react-redux': path.resolve(
          './node_modules/react-redux/dist/react-redux.legacy-esm.js',
        ),
        immer: path.resolve('./node_modules/immer/dist/immer.legacy-esm.js'),
        '@reduxjs/toolkit': path.resolve(
          './node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js',
        ),
        'redux-thunk': path.resolve(
          './node_modules/redux-thunk/dist/redux-thunk.legacy-esm.js',
        ),
      },
}

2. In module.rules add the following to the rule for transpiling the node_modules:

rules: [
  {
    test: /\.[jt]sx?$/,
    include: [
      /node_modules(.*[/\\])+react\//,
      /node_modules(.*[/\\])+react-native/,
      /node_modules(.*[/\\])+@react-native/,
      /node_modules(.*[/\\])+@react-navigation/,
      /node_modules(.*[/\\])+@react-native-community/,
      /node_modules(.*[/\\])+expo/,
      /node_modules(.*[/\\])+pretty-format/,
      /node_modules(.*[/\\])+metro/,
      /node_modules(.*[/\\])+abort-controller/,
      /node_modules(.*[/\\])+@callstack\/repack/,
/* -> */ /node_modules(.*[/\\])+immer/,
/* -> */ /node_modules(.*[/\\])+redux/,
/* -> */ /node_modules(.*[/\\])+react-redux/,
/* -> */ /node_modules(.*[/\\])+@reduxjs(.*[/\\])+toolkit/,
/* -> */ /node_modules(.*[/\\])+redux-thunk/,
/* -> */ /node_modules(.*[/\\])+reselect/,
    ],
    use: 'babel-loader',
  },
],

This should work for now, I'll still investigate this in more detail as there should be less differences there, here's how the resolution table look for metro and webpack without adding the aliases:

Library	Metro Resolved Path (metro-resolver)	Webpack Resolved Path (enhanced-resolve)
react-redux	node_modules/react-redux/dist/react-redux.legacy-esm.js	node_modules/react-redux/dist/cjs/index.js
@reduxjs/toolkit	node_modules/@reduxjs/toolkit/dist/cjs/index.js	node_modules/@reduxjs/toolkit/dist/cjs/index.js
immer	node_modules/immer/dist/immer.legacy-esm.js	node_modules/immer/dist/cjs/index.js
redux	node_modules/redux/dist/cjs/redux.cjs	node_modules/redux/dist/cjs/redux.cjs
reselect	node_modules/reselect/dist/cjs/reselect.cjs	node_modules/reselect/dist/cjs/reselect.cjs
redux-thunk	node_modules/redux-thunk/dist/cjs/redux-thunk.cjs	node_modules/redux-thunk/dist/cjs/redux-thunk.cjs

Changing the entrypoint paths for react-redux & immer should be enough in this case but for some reason isn't.