Not able to use redux with @redux-toolkit package

[saurav-bhagat]

As mentioned in the Readme, I have added packages in the webpack config:

case 'redux':
        return {
          name: packageName,
          var: 'redux',
          version: packageVersion,
          url: `https://unpkg.com/redux@${packageVersion}/dist/redux.min.js`,
        };
      case 'immer':
        return {
          name: packageName,
          var: 'immer',
          version: packageVersion,
          url: `https://unpkg.com/immer@${packageVersion}/dist/immer.cjs.${
            isProd ? 'production.min.js' : 'development.js'
          }`,
        };
      case 'reselect':
        return {
          name: packageName,
          var: 'reselect',
          version: packageVersion,
          url: `https://unpkg.com/reselect@${packageVersion}/dist/reselect.js`,
        };

      case '@babel/runtime':
        return {
          name: packageName,
          var: '@babel/runtime',
          version: packageVersion,
          url: `https://cdn.jsdelivr.net/npm/babel-runtime@${packageVersion}/helpers/classCallCheck.min.js`,
        };
        case 'react-redux':
        return {
          name: packageName,
          var: 'ReactRedux',
          version: packageVersion,
          url: `https://unpkg.com/react-redux@${packageVersion}/dist/react-redux.js`,
        };

      case '@reduxjs/toolkit':
        return {
          name: packageName,
          var: '@reduxjs/toolkit',
          version: packageVersion,
          url: `https://unpkg.com/@reduxjs/toolkit@${packageVersion}/dist/redux-toolkit.modern.${
            isProd ? 'production.min.js' : 'development.js'
          }`,
        };

 But, in my sheets dialog, getting this error in console:

For all these packages I have done, npm i -S , so package.json dependencies looks like:

"dependencies": {
    "@babel/runtime": "^7.21.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@reduxjs/toolkit": "^1.9.3",
    "antd": "^5.3.1",
    "axios": "^1.3.4",
    "gas-client": "1.1.0",
    "immer": "^9.0.21",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.8.0",
    "react-redux": "^8.0.5",
    "react-router": "^6.9.0",
    "react-router-dom": "6.9.0",
    "react-transition-group": "^4.4.2",
    "redux": "^4.2.1",
    "reselect": "^4.1.7",
    "sort-by": "^1.2.0"
  },

I am running locally. Am I missing anything?

[enuchi]

Does it work in prod, i.e. if you run npm run deploy?

[saurav-bhagat]

Thanks for the quick response @enuchi

No, In prod its giving different error:

Actually immer is imported just before redux in redux-toolkit. And immer and redux are dependencies of redux-toolkit.

[enuchi]

Couple pointers

• First try to not externalize any packages and make sure your app works in prod and development
• Externalizing packages can help reduce the bundle size. Do it with one package at a time to help narrow down where the issues are. Maybe start with the largest packages.
• Not all packages can be externalized and loaded from a CDN -- dig around the documentation. You need to use a UMD build. I don't know what immer is but looking at its documentation quickly they state what the right url is for loading from a CDN: https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js (note it's the umd build, not cjs)
• Check out the other issues here -- I think others mentioned having trouble getting redux to work with GAS

[macabacus-ra]

I am experienced with using redux toolkit. It doesn't work here by just adding a store and giving provider context. Perhaps you will have to delve deeper to find a solution to make redux work. BUT, Zustand does work. It is ridiculously easy to setup. Good luck!

[saurav-bhagat]

Thanks @enuchi , will try whatever you mentioned.

@macabacus-ra sure, will give zustand a try.