Not able to use redux with @redux-toolkit package
saurav-bhagat opened this issue · comments
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 <package_name>, 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?
Does it work in prod, i.e. if you run npm run deploy
?
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.
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
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!
Thanks @enuchi , will try whatever you mentioned.
@macabacus-ra sure, will give zustand a try.