jss
jss copied to clipboard
cssinjs
get error msg in Micro-frontend environment: Cannot read properties of null (reading 'cssRules')
Expected behavior: i can switch micro apps as fine
Describe the bug: when i switch back to a micro app , get error msg like :
jss.esm.js:1749 Uncaught TypeError: Cannot read properties of null (reading 'cssRules')
at getValidRuleInsertionIndex (jss.esm.js:1749:1)
at DomRenderer.insertRule (jss.esm.js:1894:1)
at DomRenderer.insertRules (jss.esm.js:1856:1)
at DomRenderer.deploy (jss.esm.js:1843:1)
at StyleSheet.deploy (jss.esm.js:1173:1)
at StyleSheet.attach (jss.esm.js:1052:1)
at attach (makeStyles.js:120:1)
at eval (makeStyles.js:236:1)
at useSynchronousEffect (makeStyles.js:188:1)
at useStyles (makeStyles.js:228:1)
at FiTable (index.js:72:1)
at renderWithHooks (react-dom.development.js:14970:1)
at mountIndeterminateComponent (react-dom.development.js:17732:1)
at beginWork (react-dom.development.js:18933:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3920:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3969:1)
at invokeGuardedCallback (react-dom.development.js:4029:1)
at beginWork$1 (react-dom.development.js:23778:1)
at performUnitOfWork (react-dom.development.js:22614:1)
at workLoopSync (react-dom.development.js:22551:1)
at renderRootSync (react-dom.development.js:22517:1)
at performSyncWorkOnRoot (react-dom.development.js:22134:1)
at eval (react-dom.development.js:11380:1)
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11326:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11375:1)
at flushSyncCallbackQueue (react-dom.development.js:11363:1)
at scheduleUpdateOnFiber (react-dom.development.js:21734:1)
at Object.enqueueSetState (react-dom.development.js:12503:1)
at push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:358:1)
at eval (react-router.js:63:1)
at listener (history.js:162:1)
at eval (history.js:180:1)
at Array.forEach (<anonymous>)
at Object.notifyListeners (history.js:179:1)
at setState (history.js:300:1)
at eval (history.js:323:1)
at Object.confirmTransitionTo (history.js:152:1)
at handlePop (history.js:321:1)
at handlePopState (history.js:306:1)
at navigation-events.js:73:1
at Array.forEach (<anonymous>)
at et (navigation-events.js:68:1)
at y (reroute.js:235:1)
at reroute.js:166:1
Versions (please complete the following information):
"dependencies": {
"@ant-design/pro-form": "^1.71.2",
"@ant-design/pro-provider": "^1.9.0",
"@ant-design/pro-table": "^2.78.2",
"@apollo/client": "^3.4.7",
"@babel/runtime": "^7.7.7",
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^1.3.11",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@material-ui/styles": "^4.10.0",
"@storybook/addon-a11y": "^6.3.4",
"@storybook/addon-knobs": "^6.2.9",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"ahooks": "^2.9.4",
"antd": "^4.20.5",
"apollo-datasource-rest": "^0.14.0",
"apollo-server": "^2.25.1",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.18.1",
"babel-loader": "~8.1.0",
"body-scroll-lock": "^3.1.5",
"clipboard-copy": "^3.1.0",
"clsx": "^1.1.1",
"commander": "^8.3.0",
"compression-webpack-plugin": "^7.0.0",
"concurrently": "^6.4.0",
"connected-react-router": "^6.8.0",
"cross-env": "^7.0.3",
"cross-fetch": "^3.0.5",
"date-fns": "^2.28.0",
"dayjs": "^1.9.7",
"dotenv-expand": "^5.1.0",
"draft-js": "^0.11.6",
"draftjs-to-html": "^0.9.1",
"emoji-picker-react": "^3.2.1",
"eslint-config-alloy": "3.8.2",
"firebase": "^8.7.1",
"graphql": "^15.5.0",
"history": "^4.10.1",
"http-proxy-middleware": "^1.0.6",
"immer": "^8.0.0",
"js-base64": "^3.6.0",
"json2xls": "^0.1.2",
"jss": "^10.9.1",
"jss-rtl": "^0.3.0",
"lodash": "^4.17.20",
"loglevel": "^1.7.1",
"loglevel-plugin-remote": "^0.6.8",
"material-table": "^1.65.0",
"material-ui-popup-state": "^1.6.1",
"moment": "^2.27.0",
"node-sass": "^6.0.1",
"nodemon": "^2.0.15",
"notistack": "^1.0.9",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"prismjs": "^1.24.1",
"prop-types": "^15.7.2",
"qiankun": "^2.7.3",
"raw-loader": "^4.0.1",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-bottom-scroll-listener": "^4.0.0",
"react-color": "^2.18.1",
"react-countup": "^4.3.3",
"react-device-detect": "^1.15.0",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.5",
"react-draggable": "^4.4.3",
"react-dropzone": "^11.0.2",
"react-fast-compare": "^3.2.0",
"react-intl": "^5.8.4",
"react-jvectormap": "^0.0.16",
"react-loadable": "^5.5.0",
"react-notifications": "^1.6.0",
"react-number-format": "^4.4.1",
"react-perfect-scrollbar": "^1.5.8",
"react-placeholder": "^3.0.2",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-slick": "^0.26.1",
"react-sortable-hoc": "^1.11.0",
"react-spring": "^8.0.27",
"react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^0.13.9",
"react-text-mask": "^5.4.3",
"react-toastify": "^6.1.0",
"react-tracking": "^8.1.0",
"react-use": "^17.2.4",
"react-virtualized": "^9.22.3",
"reactour": "^1.18.0",
"recharts": "^2.1.8",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"sweetalert2": "^9.17.1",
"sweetalert2-react-content": "^3.0.3",
"ts-node-dev": "^1.1.8",
"typescript": "4.1.2",
"virtuallist-antd": "^0.7.4-beta.0"
},
"devDependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.14.2",
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@storybook/addon-actions": "^6.3.4",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/preset-create-react-app": "^3.0.0",
"@storybook/react": "^6.3.4",
"@types/react-router-dom": "^5.1.7",
"@types/resize-observer-browser": "^0.1.7",
"chalk": "^4.1.2",
"customize-cra": "^1.0.0",
"dotenv-cli": "^4.0.0",
"faker": "^5.5.3",
"husky": "4.2.3",
"less": "4.1.2",
"less-loader": "7.3.0",
"lint-staged": "^10.0.8",
"md5": "^2.3.0",
"prettier": "^2.7.1",
"prettier-plugin-organize-imports": "^3.0.0",
"react-app-rewired": "^2.1.8",
"react-dev-inspector": "^1.8.0",
"shelljs": "^0.8.4",
"webpack": "4.44.2"
},
@okonet sorry asking for help : the reason seems like from here
if (nativeParent === void 0) {
nativeParent = this.element.sheet // this will be null
// if(this.element.sheet){
// nativeParent = this.element.sheet
// ___cacheElement = this.element.sheet
// }else{
// nativeParent = ___cacheElement;
// }
}
The same problem here. This error occurs when in stylesheet are empty style blocs.
Its generated by MUI v4.
It works with this code:
_proto.insertRules = function insertRules(rules, nativeParent) {
for (var i = 0; i < rules.index.length; i++) {
if (nativeParent !== void 0 || this.element.sheet !== void 0)
this.insertRule(rules.index[i], i, nativeParent);
}
}
