search

emotion-js / emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition
https://emotion.sh/
MIT License
17.5k stars 1.11k forks source link

createCache - Object(...) is not a function in middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)) #2302

Closed bknill closed 3 years ago

bknill commented 3 years ago

I've recently added Emotion to an existing React project (well a package we use has)

And I can't get it to render

image

I saw another issue which highlighted a problem with React-Scripts which I've upgraded to 4.0.3.

I also get this in console image

Expected behavior:

Environment information:

Andarist commented 3 years ago

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

bknill commented 3 years ago

Thanks it's a huge project but will try and replicate it. The library I'm using is: https://github.com/projectstorm/react-diagrams

I've been completely stuck on this for 3 days. It's driving me insane.

The error is coming from emotion-cache.browser.esm

Is there anyway to disable or get around this?

bknill commented 3 years ago

I added a REACT_EDITOR and the error changed slightly

image

Seems to be coming from webpack/boostrap now, we're using bootstrap - could there be some kind of conflict?

bknill commented 3 years ago

Dependencies

  "devDependencies": {
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "@types/aframe": "0.8.4",
    "@types/jest": "24.0.23",
    "@types/node": "12.12.16",
    "@types/node-sass": "4.11.0",
    "@types/ramda": "0.26.39",
    "@types/react": "16.9.16",
    "@types/react-dom": "16.9.4",
    "@types/react-redux": "7.1.5",
    "@types/react-router": "5.1.2",
    "@types/reactstrap": "8.4.1",
    "@types/stompjs": "2.3.4",
    "@types/styled-components": "4.4.1",
    "body-parser": "1.19.0",
    "cors": "2.8.5",
    "cross-env": "6.0.3",
    "dpdm": "3.4.3",
    "env-cmd": "10.1.0",
    "express": "4.17.1",
    "flow-bin": "0.80.0",
    "npm-run-all": "4.1.5",
    "puppeteer": "^5.5.0",
    "react-app-rewire-optimize": "1.0.2",
    "react-scripts": "3.4.1",
    "react-scripts-plugin-no-hashes": "^0.4.0",
    "react-scripts-ts": "4.0.8",
    "ts-jest": "22.4.6",
    "ts-node": "8.10.2",
    "ts-node-dev": "1.0.0-pre.44",
    "tslint-react-hooks": "2.2.1",
    "typescript": "3.8.3",
    "webpack-bundle-analyzer": "^4.1.0",
    "webpack-conditional-loader": "^1.0.12"
  },
  "dependencies": {
    "@gamestdio/scorm": "^0.1.3",
    "@projectstorm/react-diagrams": "6.5.0",
    "@redux-offline/redux-offline": "2.5.2",
    "@steveeeie/react-page-transition": "1.0.1",
    "@stomp/stompjs": "4.0.2",
    "@types/luxon": "1.22.0",
    "@types/three": "^0.126.1",
    "abortcontroller-polyfill": "1.4.0",
    "aframe": "1.2.0",
    "aframe-ambisonic-component": "0.5.3",
    "aframe-animation-component": "5.1.2",
    "aframe-gradient-sky": "1.0.4",
    "aframe-htmlembed-component": "1.0.0",
    "aframe-keyboard": "git+https://github.com/WandererOU/aframe-keyboard",
    "aframe-layout-component": "5.3.0",
    "aframe-look-at-component": "0.8.0",
    "aframe-meshline-component": "^0.4.0",
    "aframe-svgfile-component": "1.1.2",
    "ahrs": "^1.2.3",
    "aos": "^2.3.4",
    "axios": "0.21.0",
    "bootstrap": "4.6.0",
    "browser-image-resizer": "2.1.0",
    "chart.js": "2.9.3",
    "closest": "0.0.1",
    "connected-react-router": "6.6.1",
    "dagre": "0.8.5",
    "dashjs": "3.0.1",
    "draft-convert": "2.1.8",
    "draft-js": "0.10.5",
    "draftail": "1.3.0",
    "emotion": "^11.0.0",
    "evaporate": "^2.1.4",
    "exifreader": "3.2.0",
    "file-saver": "2.0.2",
    "font-awesome": "4.7.0",
    "formik": "2.1.4",
    "gifshot": "0.4.5",
    "glsl-fast-gaussian-blur": "1.0.2",
    "gopro-js": "^0.2.3",
    "gopro-telemetry": "^1.1.32",
    "gpmf-extract": "^0.1.20",
    "handle-thing": "2.0.1",
    "he": "1.2.0",
    "hls.js": "0.13.2",
    "howler": "2.1.3",
    "html-webpack-inline-source-plugin": "1.0.0-beta.2",
    "html2canvas": "1.0.0-rc.5",
    "http-proxy-middleware": "1.0.4",
    "jspdf": "1.5.3",
    "jszip": "3.5.0",
    "jwt-decode": "2.2.0",
    "localforage": "1.7.3",
    "lodash": "4.17.15",
    "luxon": "1.22.2",
    "mathjs": "6.6.1",
    "ml-matrix": "6.5.0",
    "moment": "2.24.0",
    "node-sass": "4.14.1",
    "offscreen-canvas": "0.1.1",
    "path-data-polyfill": "1.0.3",
    "pathfinding": "0.4.18",
    "paths-js": "0.4.10",
    "query-string": "6.12.0",
    "ramda": "0.26.1",
    "react": "17.0.2",
    "react-app-rewire-workbox": "^2.0.1",
    "react-app-rewired": "1.6.2",
    "react-beautiful-dnd": "10.0.4",
    "react-bootstrap-typeahead": "5.0.0-rc.1",
    "react-chartjs-2": "2.9.0",
    "react-circular-progressbar": "2.0.3",
    "react-color": "2.18.1",
    "react-compound-timer": "1.1.15",
    "react-day-picker": "7.4.0",
    "react-dnd": "5.0.0",
    "react-dnd-html5-backend": "3.0.2",
    "react-dom": "17.0.1",
    "react-draggable": "4.2.0",
    "react-dropzone": "10.2.1",
    "react-dropzone-uploader": "2.11.0",
    "react-facebook": "^8.1.4",
    "react-gtm-module": "^2.0.11",
    "react-helmet": "5.2.1",
    "react-icons": "4.1.0",
    "react-input-autosize": "2.2.2",
    "react-intercom": "1.0.15",
    "react-modal": "3.11.1",
    "react-multi-carousel": "2.4.2",
    "react-perfect-scrollbar": "1.5.8",
    "react-reactstrap-pagination": "2.0.3",
    "react-redux": "7.1.0",
    "react-resize-detector": "4.2.3",
    "react-rnd": "10.1.10",
    "react-router": "5.1.2",
    "react-router-dom": "5.1.2",
    "react-router-redux": "next",
    "react-share": "^4.3.1",
    "react-slider": "1.0.3",
    "react-snap": "1.23.0",
    "react-sortable-hoc": "1.11.0",
    "react-tag-input": "6.4.2",
    "reactstrap": "8.4.1",
    "reactstrap-confirm": "1.2.0",
    "recordrtc": "5.6.1",
    "redux": "4.0.4",
    "redux-logger": "3.0.6",
    "redux-persist-transform-immutable": "5.0.0",
    "redux-saga": "1.1.3",
    "redux-select": "3.5.2",
    "reselect": "4.0.0",
    "resize-observer-polyfill": "1.5.1",
    "rxjs": "6.5.4",
    "sanitize.css": "7.0.3",
    "scorm-again": "^1.4.5",
    "screenfull": "^5.1.0",
    "serve": "^11.3.2",
    "sockjs-client": "1.1.4",
    "source-map-explorer": "2.5.0",
    "spdy": "4.0.2",
    "styled-components": "4.4.1",
    "svg-mesh-3d": "1.1.0",
    "three-simplicial-complex": "69.0.6",
    "three.meshline": "git+https://github.com/spite/THREE.MeshLine",
    "uuid": "8.1.0",
    "video-metadata-thumbnails": "1.0.17",
    "video-react": "0.14.1",
    "wavesurfer.js": "3.3.1",
    "why-did-you-update": "^1.0.8",
    "workerize-loader": "1.3.0",
    "yup": "0.28.3"
  },
Andarist commented 3 years ago

Unfortunately, this still ain't a runnable repro case so I have no way of checking out what is going on.

bknill commented 3 years ago

I have got around the issue, by loading another page in the app below this page it loads and then the app runs.

i.e. /home/problem gets this error, but going to /home/problem/solution first, then returning to home/problem everything is fine.

I'll try and put together a repo, as you can see it's a huge project. I could give you access to the dev server if you drop me an email?

Andarist commented 3 years ago

I'll try and put together a repo, as you can see it's a huge project. I could give you access to the dev server if you drop me an email?

I believe that my email is publicly available on my GitHub profile.

bknill commented 3 years ago

@Andarist solved this. The problem was that we're using react-app-rewired and needed to add some code to config-overrides to handle this library

  const jsRules = config.module.rules.find(rule => rule.oneOf).oneOf
  const nodeModulesJsRule = jsRules.find(rule => rule.test && (console.log(rule.test.source), 1) && rule.test.source === "\\.js$")
  nodeModulesJsRule.test = /\.(js|mjs|cjs)$/