get error msg in Micro-frontend environment: Cannot read properties of null (reading 'cssRules')

[haoyinag]

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"
  },

[haoyinag]

@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;
      // }
    }

[behnammodi]

@haoyinag could you reproduce it on a repo or on a sandbox link?

[LGorzo]

The same problem here. This error occurs when in stylesheet are empty style blocs.

<style data-jss data-meta="MuiBox"> </style>

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);
        }
}