react-select: Uncaught TypeError: Object(...) is not a function

I’ve added latest “react-select”: “^4.1.0”, to the project and suddenly I am getting the following error:

Uncaught TypeError: Object(...) is not a function
    at createCache (emotion-cache.browser.esm.js?fb55:254)
    at eval (emotion-element-4fbd89c5.browser.esm.js?7121:17)
    at Module../node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js (main.js:1331)
    at __webpack_require__ (main.js:790)
    at fn (main.js:101)
    at Module.eval (emotion-react.browser.esm.js?01e1:1)
    at eval (emotion-react.browser.esm.js?01e1:329)
    at Module../node_modules/@emotion/react/dist/emotion-react.browser.esm.js (main.js:1343)
    at __webpack_require__ (main.js:790)

I’ve also cleared node_modules folder and rebuilt the dependencies with yarn, but it’s the same error. Package.json:

  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@szhsin/react-menu": "^0.11.2",
    "abortcontroller-polyfill": "^1.5.0",
    "dayjs": "^1.10.4",
    "file-saver": "^2.0.5",
    "history": "4.10.1",
    "immer": "^8.0.0",
    "nanoid": "^3.1.20",
    "prettier": "^2.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-beautiful-dnd": "^13.0.0",
    "react-beforeunload": "^2.2.4",
    "react-datepicker": "^3.5.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hot-toast": "^1.0.2",
    "react-laag": "^2.0.2",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.1.0",
    "react-virtuoso": "^1.5.5",
    "react-window": "^1.8.6",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-undo": "^1.0.1",
    "reselect": "^4.0.0",
    "talkr": "^2.1.0",
    "use-clipboard-copy": "^0.1.2",
    "whatwg-fetch": "^3.4.1",
    "yup": "^0.32.8"
  },

I don’t know if this might be some build issue, but this happened after I’ve added react-select to the project, nothing else afterwards.

Can someone help me fix this?

And yes, there are bunch of warnings:

react_devtools_backend.js:2430 [WDS] Warnings while compiling.
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:126
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 245:53-60
"export 'COMMENT' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 54:25-30
"export 'alloc' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 257:23-30
"export 'compile' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 54:9-16
"export 'dealloc' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 31:25-32
"export 'delimit' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 46:25-29
"export 'from' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 27:25-35
"export 'identifier' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 254:21-31
"export 'middleware' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 48:23-27
"export 'next' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 19:32-36
"export 'peek' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 38:28-32
"export 'peek' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 27:36-44
"export 'position' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 175:28-36
"export 'prefixer' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 257:13-22
"export 'serialize' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 241:29-38
"export 'stringify' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 16:12-17
"export 'token' was not found in 'stylis'

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 25

Commits related to this issue

Adjust webpack build to support react-select@4 In order to function with the update introduced in the previous commit, webpack needs to be told not to file-load things in `node_modules`. See: https:/... — committed to humanmade/hm-gutenberg-tools by alwaysblank 3 years ago

Most upvoted comments

Sorry, I meant to follow up here when we resolved this over email. The issue was with the Webpack config. The file-loader section looked like the screenshot below but without the , /node_modules/ at the end of the exclude array.

Changing the file-loader configuration to exclude the node_modules folder (as shown above) resolved the issue. The root issue was that the file being imported for stylis is node_modules/stylis/dist/stylis.mjs, so file-loader was trying to process it because it wasn’t in the exclude array.

+17

Methuselah96 on Mar 1, 2021

Ran into this issue too just now. Happened when I upgraded Storybook.

Deleting node_modules and running yarn again fixed this for me.

elie222 on Jul 28, 2021

For me, even though stylis was in my node_modules folder, I needed to explicitly add it to my package.json. 🤷

jrosspaperless on Jun 25, 2021

@avanrider Are you able to make a public repo demonstrating the issue? I’d be happy to look into it.

Methuselah96 on Jun 17, 2021